I sat up late most of yesterday writing and illustrating a tutorial on how to make quick block blends, just for this! Hope you enjoy.

Block Blend Sample Game:






604621/84734F/A8A07E/CCCCAC/F0F9DA
855B1A/917C45/9D9D70/AABE9C/B6E0C7
AA7112/9F863B/939B63/87B18B/7CC6B4
CF860B/AC8F30/899956/65A37B/42ACA1
F49B03/B99926/7E9749/43956B/08938E






CA8305/A56E08/80590C/5A430F/352E12
A26604/926312/836020/745D2E/655A3C
794803/80581B/866734/8D774D/948766
512B01/6D4D25/8A6F49/A7916C/C3B390
280D00/5B422F/8E765D/C0AB8B/F3DFBA

First, go to

http://pourpre.com/chromograf/en/

There are a bunch of menus.


Ignore everything but the lovely pink and orange striped circle. Pick that option.


It opens up with a long linear gradient with ten steps. Ignore that.
Instead, change the grid number to 5, and pick the bottom OK box.
Your result should look like this:


Add a # to the empty fourth box, and hit the bottom OK again.
Your result should look like this:


Now we are ready to play. Each of those four boxes represents a corner on the resulting block gradient representation. The two boxes above represent the ends of a linear gradient, and that is handy, too. We will be using that in the Block Blend game. The values of the block gradient and the linear gradient are seperate. Meaning you can switch the view back and forth, change a value on the block gradient, but it won't affect colors on the linear gradient, and vice versa. Also handy.
Troubleshooting at pourpre.com: A peculiarity of pourpre... it must have that # in the window, with no spaces, and then your hex number. If your block is screwing up, delete the field entirely, add a #, then paste in your hex number directly after with no spaces, press OK, and it should show correctly. When you fill in a hex number on the fourth formerly empty field, make sure you don't include a space by accident, 7 characters in each box only. We don't use the # with hex numbers much on Colourlovers, but it is a standard of HTML, and built into the pourpre.com coding, so you need one for it to work.

Anyway.

Now, open yourself a little text document, to copy and paste from. You could use a comment box on Colourlovers, but the scrolling is a little weird. Suit yourself. I use TextEdit, which comes with all Macs, there's a windows equivalent, NotePad. You do not need any formatting at all. I usually have 4 or 5 of these documents open all the time, as I tend to use them instead of bookmarks, because I can annotate them, collect pictures and stuff in them, save as pdfs, then have on my iPad. They are very handy, but never mind. Hope you don't mind that my desktop is cluttered.

This is your space to code on. The code is invisible when you paste it into Colourlovers text boxes, except to make your pictures. You may need to put your browser in a window, and not full screen, in order to click back and forth easily between your browser and your text editor. I will just make screenshots of the code, and coding process, so you can see it because when you submit the text box on CL, the code disappears.
Don't panic, it's not complicated at all. 90% is straightforward cutting and pasting, and the whole process takes less than 5 min. If you can follow simple instructions, and copy and paste about 30 times in a row, you have got this!





Here I have two sample block blends, a large one, and a small one. Wist made the code for the large version, by the way. The small version comes from the Block Blend Forum's method. I included the strings of hex numbers by row underneath, in case I needed to refer to them later. There are five rows of five hexes each, and here's the important part. These are fake palette pictures. I did not make palettes out of any of these. I just used Colourlovers resources to make the colors visible, and frankly, I'm relieved not to have to make all the extra palettes, only the good ones I choose later. I like making these fake palettes for blending experiments and using them for various purposes. Learned how in a tutorial from YCC2106. Anyway.

Here's what to copy to your text document.
Let's say we want to use the big block version. That's the one on the top. When you reply to this sample post, here's what you see in the code:




========================================

This text is in two groups. The top group of codes use the big block, and the bottom group of codes use the small block. The following instructions are the same for either one you want to use, so pick the one you want. For the example, we're using the big block, the top group. If you wanted a small block blend, use the first line from the second text group, and delete everything else, following these same directions after.

Delete all the highlighted stuff, leaving only the first line.





Delete the Block Blend Sample Game: line also, including the blockquote and its brackets.

This is the only part you need.


Copy this block of code, and paste it onto your text document.

Select the part of the code with the hex numbers and the slashes between them. Replace the line with xxxxxxx. Leave the beginning and ending slashes there in place.



Copy this code and paste it underneath 4 times.
Should look like this:


Now we are going to build a dummy line for easy cut and pasting.
Make a line of text that looks like this. It totally doesn't matter how many xs or whatever you put in each segment. What is important is no extra spaces.

Copy that line and paste it in 4 more times. I put a return between them for ease and more space, but I'll remove those later.

So on your text doc, you have 5 copies of the big box code line, and 5 dummy lines, should look like this:


Now back to pourpre.com!

Let's say for argument, I'm wanting to make a block blend out of this palette:


I can only use 4 of the 5 colors, so I'm going to skip the green, hoping a green will show up through mixing the blue and yellow.
I paste the hex numbers into the corners of the lower four boxes, and press lower OK.
Here's my result:

You can see the hex numbers of the four corners on the result, but not the hex numbers of the unmarked colors. However, if you click on an unknown color, its hex number will show up in the center of the lower part of the page here:



On the text document, we will start making the dummy lines, pasting in the new hex numbers.
First, copy and paste the hex numbers from the four corners of the block into the dummy text. You don't have to drag select... just double click on the hex number or the xxxxx, and you will have selected the whole word, then just copy/paste. You can see on the example I've already pasted in the second hex that we learned in the previous step. Double click, (but not triple click, or you'll get the # also, which we don't need in our CL code). Do not bother the slashes in your dummy... leave those alone. Just the double click the hex number or the xxxxx or ccccc.



From here, it's a matter of clicking, then copying and pasting from the block on pourpre.com into your dummy document. Your dummy should look like this at this stage, with all the hexes placed:


We are almost finished making the block blend!

Copy one line of the dummy and paste each into a code bracket, double clicking and pasting right on the xxxxxx.

Copy:


All pasted, one into each line.



Now I went ahead and cleaned up, moving the hex lines together just underneath the picture codes.

Troubleshooting: About the selection.... don't select the whole line all the way to the right, as shown here on the fourth line. If you copy and paste as is into a picture code, you will have included an extra space, and your resulting picture will mess up, until you hunt down the space and delete it. So watch out for that. Personal experience speaking here.

When you paste the whole mess into a CL comment box and submit, it should look like this:

Part two: How to Blend the Blocks:
Now! How to blend your block blends.
Set the grid number on poupre.com to 3 and press the upper OK button. That sets up a linear gradient between the two colors you enter, with an unknown color to be discovered in the middle. You learn its hex by clicking on it.
I am going to blend the block we just made

with this one:


Even though we filled out the whole block from hex numbers to make the pictures, we only have to blend the corner numbers of the two blocks together to get a new blend. To do that, make a 3-step linear gradient with the upper box on pourpre.com, using the upper OK button.

Here I have blended E1FA09 from the Grocery Store Wifi Block's upper left corner with F1A20B from the Psyc block. The color in the middle is the new upper left corner color for the next blended block.

So here are the new corners.
Upper Left: E1FA09 + F1A20B = E9CE0A
Upper Right: FD55E3 + FC036C = FD2CA8
Lower Left: 2F6C8A + 08807B = 1C7683
Lower Right: 493B82 + 420B58 = 393C71

Set the grid number on pourpre.com back to 5, and press the lower OK button.
Enter your new corner numbers. Click the lower OK button and admire your new blended block.
Back to your text document.
Delete everything except one line of code in brackets. Replace the hex numbers between the brackets with some XXXX or other character, make 4 more copies.
Make a new dummy line to paste in the discovered hex numbers of your new blend.
xxxxx/cccccc/xxxxxx/cccccc/xxxxxx
Copy your new dummy line 4 more times.
Fill in the dummy line with copied and pasted hex numbers learned from pourpre.com, until you have filled in all 25 segments, like this.



Copy one line of the dummy and paste each into a code bracket, double clicking and pasting right on the xxxxxx.
When you are done, it should look like this:

When you copy and paste the whole thing into a comment box at CL and submit, your result should look like this:

Done!


Inspired by this Block Blend, but I had to fix the turquoise and green.

So. I am proposing that you blend your block with the last block, or with another block someone else has made. If you decide to make any palettes with the hex numbers you have collected, include those in your submission ^_^

Psyc/GroceryStoreWifi cross + epaulet:


Epaulet Block Blend





FEFFA3/F7E48D/EFC978/E8AE62/E0934C
FBCE89/EBB87A/DAA26C/C98D5E/B9774F
F99C6E/DF8C67/C57C60/AB6C59/925B52
F66B54/D36054/B05555/8D4A55/6A4056
F33939/C73441/9B2F49/6F2951/432459
+
Psyc Wifi





E9CE0A/EEA632/F37D59/F85581/FD2CA8
B6B828/BB9645/C17461/C6527E/CC309A
83A246/898758/8F6B6A/95507B/9B348D
4F8C65/56776B/5D6272/634D78/6A387F
1C7683/23687E/2B597A/324A76/393C71
=
New Blend: General Store





F3E756/F2C55F/F1A368/F08271/EF607A
D8C358/D3A75F/CD8C66/C8706E/C35475
BEA05A/B48A5F/AA7465/A05E6A/974870
A37C5C/956C60/875C63/784C67/6A3C6A
88585E/764E60/634462/513A63/3E3065

Okay, I just had a flash, that if I set up the dummies with notepad.cc, then we wouldn't need most of my tutorial. So much easier. I'll ponder after some food.

General Store
Blending with

Chose from the palette these 4 colors:
Upper Left Corner: FFFFFB
Upper Right Corner: 504F55
Lower Left Corner: A3A6B9
Lower Right Corner: 131315

Result:
Watch the Store





F9F3A9/E3CC99/CDA589/B67F78/A05868
E0D6A2/C9B391/B19080/9A6D6E/824A5D
C7B99B/AE9A89/967B77/7D5C65/653D53
AE9C93/948180/7A666E/614B5B/473048
957F8C/7A6878/5F5165/443951/29223D

This palette has 3 colors from General Store, and 2 colors from Watch the Store.

Not a perfect translation, but

Enviable





FFD7A4/C1B0A3/8389A1/4562A0/073B9E
EBA18E/B3848B/7C6888/444B85/0C2E83
D76C77/A65973/74476F/43346B/122267
C33661/982E5B/6D2556/421D51/17154C
AF004A/8A0244/66043D/410637/1C0830
+
Watch the Store
=
Desirable Merchandise





FCE5A7/D2BE9E/A89895/7E718C/544A83
E6BC98/BE9C8E/977C84/6F5D7A/483D70
CF9389/AA7A7E/856173/604868/3C305D
B9697A/96586E/744662/523456/2F224A
A2406B/82355E/622B51/432044/231537

Diagonal of Enviable Block Blend:

Dragon Life:






F8F9CE/F1EAB8/EADAA2/E2CB8B/DBBB75
BCE1BF/BACDA7/B8B990/B6A578/B49160
80C8B0/83B097/87987E/8A8065/8E684C
44B0A0/4D9386/55776C/5E5A51/673E37
089791/167675/24565A/32353E/401422
+
Enviable





FFD7A4/C1B0A3/8389A1/4562A0/073B9E
EBA18E/B3848B/7C6888/444B85/0C2E83
D76C77/A65973/74476F/43346B/122267
C33661/982E5B/6D2556/421D51/17154C
AF004A/8A0244/66043D/410637/1C0830
=
Enviable Dragon





FCE8B9/D9CDAD/B7B2A2/949696/717B8A
D4C1A6/B7A999/9A908C/7D787F/606072
AC9A93/958585/7E6F77/675A68/50455A
847381/736171/614E61/503C51/3F2941
5C4C6E/513D5D/452D4C/391E3A/2E0E29

Here's a block I made from a deleted palette.
French Finch:





FAF234/E2C031/CB8F2D/B35D29/9B2B26
DAD933/C2AC33/AB7F33/945133/7D2433
B9C133/A39836/8C6F39/76463D/601D41
99A932/838439/6E5F40/583B47/42164E
789031/63703C/4F5046/3A2F51/250F5B

I'm going to blend it with this one:
Dragon Life:






F8F9CE/F1EAB8/EADAA2/E2CB8B/DBBB75
BCE1BF/BACDA7/B8B990/B6A578/B49160
80C8B0/83B097/87987E/8A8065/8E684C
44B0A0/4D9386/55776C/5E5A51/673E37
089791/167675/24565A/32353E/401422

Result:
French Dragon:





F9F581/EAD574/DAB468/CB945B/BB734E
CBDD79/BEBC6D/B29C62/A57B56/995B4A
9DC471/93A466/8A835C/806351/774347
6EAB69/688B5F/626B56/5B4B4C/552A43
409361/3D7359/3A5250/363248/33123F

Some colors from this block:


3 diagonal colors from French Finch Block, two colors from Dragon Life Block:

LINKS →






LINKS ↑

Original Palette:








Spin Offs Using Block Grid:





Okay, someone help! I obviously didn't do something right! I am missing an entire line on the right side in blue but it is copied and pasted correctly and I've tripple checked that the code is correct.

sundancer wrote:

Original Palette:


Okay, someone help! I obviously didn't do something right!

Okay, you can't use the palette image for your original palette. You have to build a new fake one. That's what my tutorial is about.

I used my saved code shells and replaced the insides with your hex strings, and hopefully this should display correctly.







When you make another one, use these same shells. Just remove the hex number strings, and replace them with new strings.

I don't really understand what that means. I thought I followed the tutorial exactly.

Inspired from:

Thank you eighteyed, you are awesome, I think I got it!!!

Okay. Short form. Reply to my message here, and take a look at the code. Remove everything but one line of the code.

You will get something like :

Replace the
xxx/cccc/ssss/xxxx/zzzz
values with the new hex numbers you want to display.
Here's an arbitrary line from one of my palettes.

EAC84D/BB9037/956125/773D14/622207
Next, copy and paste that line into your code, right on top replacing the xxxxx. Be sure not to include any extra spaces, that's the first thing to look for if something goes wrong.

The code with the new colors should display as one of the lines in the block blend.
Use my code over and over. It should work no matter what the colors are inside.
Because it is a fake palette, it is not linked with any palette on the site. It just displays as if it is.

There are two sets of instructions in my tutorial. the first says how to make a block.
The second says how to blend two blocks together to combine them into a new block of blended colors. That's where you fell off.

I'm going to replace this line with a demonstration of the corner thing, and it should make more sense, hang on.

Here's your block.






Here's one of my blocks, in a different size. Never mind that. If you want to use this size, use one line of the code and alter it to paste in your own colors, just like you did above.







Here are the corners of your block:

Upper Left B90059
Upper right 8BC6AE
Lower Left C17A0F
Lower right 210228

Here are the corner values of my block:

Upper Left: DEFB6D
Upper Right 8FC41E
Lower Left: 952072
Lower right 0D3588

Pardon me, I'm going off to pourpre to blend the two blocks together. I'll paste when I come back.

I blended your upper left corner with my upper left corner
Your upper right corner with my upper right corner, etc.

I only had to blend the values of the four corners together, and I had four new blended values as a result which I entered into the corners of the form at pourpre.com, to make a new block, which blends all 25 colors from each block together automatically. That's what I was saying ^_^