About

Color format mismatches between design tools and code cause silent rendering errors. Photoshop exports R, G, B triplets in the range 0 - 255, while CSS shorthand expects a 6-digit hexadecimal string prefixed with #. A single transposed digit produces a wrong hue with no compiler warning. This converter performs bidirectional translation between the two notations and displays a live swatch so you can visually verify the result before pasting it into your stylesheet or design token file.

The tool also computes relative luminance using the ITU-R BT.601 luma formula (Y = 0.299R + 0.587G + 0.114B) to recommend a contrasting text color. Note: this approximation applies to sRGB gamma-encoded values and does not account for wide-gamut displays.

Formulas

Each RGB channel is an integer in the range [0, 255]. The hexadecimal representation converts each channel independently to a base-16 string of exactly two characters:

Hex = # + pad(R.toString(16)) + pad(G.toString(16)) + pad(B.toString(16))

where pad left-pads with a zero if the result is a single digit. The reverse operation parses each two-character substring back to decimal:

R = parseInt(hex[1..2], 16)
G = parseInt(hex[3..4], 16)
B = parseInt(hex[5..6], 16)

Relative luminance for contrast detection uses the ITU-R BT.601 luma coefficient weighting:

Y = 0.299 × R + 0.587 × G + 0.114 × B

Where R, G, B ∈ [0, 255] are the red, green, and blue channel values. Y > 128 indicates a light color (use dark text). pad denotes zero-padding to two characters. parseInt converts a hexadecimal substring to its decimal integer equivalent.

Reference Data

Color Name	Hex Code	R	G	B	CSS Keyword	Category
White	#FFFFFF	255	255	255	white	Neutral
Black	#000000	0	0	0	black	Neutral
Red	#FF0000	255	0	0	red	Primary
Lime	#00FF00	0	255	0	lime	Primary
Blue	#0000FF	0	0	255	blue	Primary
Yellow	#FFFF00	255	255	0	yellow	Secondary
Cyan	#00FFFF	0	255	255	cyan	Secondary
Magenta	#FF00FF	255	0	255	magenta	Secondary
Coral	#FF7F50	255	127	80	coral	Warm
Tomato	#FF6347	255	99	71	tomato	Warm
Orange	#FFA500	255	165	0	orange	Warm
Gold	#FFD700	255	215	0	gold	Warm
Violet	#EE82EE	238	130	238	violet	Cool
Indigo	#4B0082	75	0	130	indigo	Cool
Teal	#008080	0	128	128	teal	Cool
Steel Blue	#4682B4	70	130	180	steelblue	Cool
Slate Gray	#708090	112	128	144	slategray	Neutral
Peru	#CD853F	205	133	63	peru	Earth
Sienna	#A0522D	160	82	45	sienna	Earth
Medium Spring Green	#00FA9A	0	250	154	mediumspringgreen	Green
Dodger Blue	#1E90FF	30	144	255	dodgerblue	Cool
Hot Pink	#FF69B4	255	105	180	hotpink	Warm
Dark Olive Green	#556B2F	85	107	47	darkolivegreen	Earth
Rebecca Purple	#663399	102	51	153	rebeccapurple	Cool
Light Salmon	#FFA07A	255	160	122	lightsalmon	Warm

Frequently Asked Questions

A 3-digit Hex code like #F0C is shorthand where each digit is duplicated: #FF00CC. This only works when both hex digits per channel are identical. The converter always outputs the full 6-digit form to avoid ambiguity. If you enter a 3-digit code in the Hex input, it is automatically expanded before parsing.

Each color channel is stored as an 8-bit unsigned integer: 2^8 = 256 possible values, from 0 (no intensity) to 255 (full intensity). Three channels produce 256 × 256 × 256 = 16,777,216 distinct colors. This 24-bit color depth is the standard for sRGB displays and CSS color values.

Non-hexadecimal characters (anything outside 0-9 and A-F) are stripped during parsing. If the cleaned string has fewer than 6 valid hex digits, the converter zero-pads the remaining channels. A toast notification alerts you that the input was corrected. The preview swatch always reflects the sanitized value.

No. CSS hex values are case-insensitive per the W3C specification. #ff6347 and #FF6347 render identically. This converter normalizes output to uppercase for readability and consistency with design tool exports.

The tool calculates perceived brightness using the BT.601 luma formula: Y = 0.299R + 0.587G + 0.114B. If Y exceeds 128, black text (#2D2B3D) is used. Otherwise, white text (#FFFFFF) is applied. This is an approximation and may not satisfy WCAG AAA contrast ratios at boundary values around Y ≈ 128.

This tool converts between RGB (0-255 per channel) and 6-digit Hex notation only. It does not handle alpha channels or HSL/HSV color spaces. For RGBA, you would need to add a fourth channel (0.0-1.0 opacity) which has no direct Hex equivalent in standard 6-digit notation. CSS does support 8-digit Hex (#RRGGBBAA) but that is outside this converter's scope.