This tool turns any string into a list of CSS hex colour codes and back again. It is a playful way to hide a short message inside a colour palette, build colour-coded test data, or understand how bytes map onto the red, green and blue channels of #RRGGBB.
How it works
Encoding reads the UTF-8 bytes of your text and groups them three at a time. Each triplet becomes one colour: the first byte is red, the second green, and the third blue. Each byte is written as two hex digits, so the three bytes form a standard six-digit colour such as #476572. If the byte count is not a multiple of three, the last group is padded with 0x00 bytes to fill the missing channels.
Decoding reverses this. Every six-digit hex token is split back into three bytes, all the bytes are concatenated, trailing zero padding is removed, and the result is decoded as UTF-8 text.
Byte-to-colour mapping in detail
Every character in your text has a UTF-8 byte value between 0 and 255. When you encode “Hello”, the tool processes these ASCII bytes:
H = 0x48, e = 0x65, l = 0x6C, l = 0x6C, o = 0x6FGrouped in threes:
- Group 1:
0x48 0x65 0x6C→#48656C(a blue-grey tone) - Group 2:
0x6C 0x6F 0x00→#6C6F00(a dark yellow-green, padded with zero)
The live colour swatches display exactly those colours, making it visible that the letter range A–Z (0x41–0x5A) produces relatively dark, saturated hues while common punctuation and lowercase letters produce mid-range grey-browns.
Why bytes map to visible colours this way
ASCII printable characters run from space (0x20 = 32) to tilde (0x7E = 126). When these values appear as R, G, or B channels (0–255), they always produce mid-range colours — never pure black (0x00) or pure white (0xFF) in the channel. This gives encoded text a characteristic look: muted, mid-saturation hues that are visually distinguishable from random colour data (which would span the full 0–255 range more uniformly).
Non-ASCII UTF-8 characters use multi-byte sequences (two bytes for code points 128–2047, three bytes for 2048–65535), so accented letters and emoji span more colours than ASCII characters — encoding “café” produces three colours (four bytes for c-a-f-é, where é is two bytes) rather than two.
Practical uses
Steganography and data hiding: Encoding a message as a colour palette is a simple way to visually conceal data. The colours look plausible to a casual observer but decode back to the original string exactly.
Test data generation: Developers sometimes need deterministic colour palettes tied to specific strings (such as user IDs or product codes) for visual differentiation in data grids. This encoding gives a repeatable colour per token.
Learning exercise: Seeing each letter become a specific colour makes the concept of bytes, hex notation, and RGB channels concrete and memorable.
Limitations and notes
Because the encoder pads with zero bytes and the decoder strips trailing zeros,
a real 0x00 byte (the null character) at the very end of your input would be
lost on round-trip. For ordinary printable text this never occurs. Three-digit
shorthand hex colours are not supported for decoding because they carry only four
bits per channel rather than eight, and would not preserve the full byte value.
Everything runs locally so your data never leaves the page.