If you print out some things from BrickColor.palette, you'll notice they're in the same order as the hexagon palette used by Studio:

print( BrickColor.palette(0) ) -- Earth green, top left
print( BrickColor.palette(6) ) -- Navy blue, top right

That means the hex is just numbered like this:

0   1   2   3   4   5   6   
7   8   9   10  11  12  13  14  
15  16  17  18  19  20  21  22  23  
24  25  26  27  28  29  30  31  32  33  
34  35  36  37  38  39  40  41  42  43  44  
45  46  47  48  49  50  51  52  53  54  55  56  
57  58  59  60  61  62  63  64  65  66  67  68  69  
70  71  72  73  74  75  76  77  78  79  80  81  
82  83  84  85  86  87  88  89  90  91  92  
93  94  95  96  97  98  99  100 101 102 
103 104 105 106 107 108 109 110 111 
112 113 114 115 116 117 118 119 
120 121 122 123 124 125 126 

It's like a really awkward rectangle.

If it were a rectangle, the code to make this would be pretty simple:

local i = 0
for y = 0, H-1 do
	for x = 0, W-1 do
		local color = BrickColor.palette(i)
		local position = Vector2.new(x, y)
		-- (make the gui)
		i = i + 1
	end
end

This is really close to working for this. W just has to vary by row. The first row, it's 7, the next, 8, 9, 10, 11, 12, 13, 12, 11, ..., 7.

You could hardcode that list, or use loops.

A solution

Here's how to save some typing. First, make the for x loop a function, called something like row:

function row(W, y)
	for x = 0, W - 1 do
		local color = BrickColor.palette(i)
		local position = Vector2.new(x, y)
		-- (make the gui)
		i = i + 1
	end
end

next, just call row a bunch:

local y = 0
-- 7, 8, .., 12, 13
for W = 7, 13 do
	row(W, y)
	y = y + 1
end
-- 12, ..., 8, 7
for W = 12, 7, -1 do
	row(W, y)
	y = y + 1
end

This will almost work, except that we're only varying the width of each row, not the left side. Thus it will look like this:

http://i.imgur.com/0oVJZX3.png

To get it to look like a hexagon, just center each row, as normal - by subtracting half the width:

		local position = Vector2.new(x - W / 2, y)

You'll get something that looks like this:

http://i.imgur.com/teuxDV8.png

This is missing the gray colors. I think they might just be the remaining colors. There's few enough that it wouldn't be difficult to hard code them, anyway.

Drawing the box

Drawing the boxes is pretty simple. You just need to make a TextButton, set its BackgroundColor, and set its Position.

function box(color, x, y)
	local m = Instance.new("TextButton", script.Parent)
	m.Size = UDim2.new(0, 20, 0, 15)
	m.Position = UDim2.new(0, x * 20, 0, y * 15)
	m.BackgroundColor3 = color.Color
end

Then just call box(color, x - W/2, y) in the appropriate place.

Full Solution

function box(color, x, y)
	local m = Instance.new("TextButton", script.Parent)
	m.Size = UDim2.new(0, 20, 0, 15)
	m.Position = UDim2.new(0, x * 20, 0, y * 15)
	m.BackgroundColor3 = color.Color
end

local i = 0
function row(W, y)
	for x = 0, W - 1 do
		local color = BrickColor.palette(i)
		box(color, x - W/2, y)
		i = i + 1
	end
end

local y = 0
-- 7, 8, .., 12, 13
for W = 7, 13 do
	row(W, y)
	y = y + 1
end
-- 12, ..., 8, 7
for W = 12, 7, -1 do
	row(W, y)
	y = y + 1
end