Developer Guide
Convert RGB to Hex
Convert RGB channels to #RRGGBB. Covers the 0–255 formula, 3-digit shorthand, HSL, palettes the converter actually builds, and WCAG 4.5:1 contrast.
RGB and hex are the same sRGB triple written two ways. rgb(59, 130, 246) is #3B82F6: each channel is an integer 0–255 turned into two hexadecimal digits. /tools/color-hex also shows HSL for that color and builds four palettes from its hue — complementary, triadic, analogous, and shades & tints.
The picker defaults to #38BDF8 (rgb(56, 189, 248)). Type a hex, pick a color, or copy the RGB row. This is a converter and a palette starter, not a contrast oracle. WCAG 4.5:1 for normal text lives on /tools/contrast-checker.
The formula: 0–255 to two hex digits
Hex digits are 0–9 then A–F. A channel c becomes c.toString(16) padded to two characters. 0 is 00, 255 is FF, 128 is 80, 59 is 3B, 130 is 82, 246 is F6. Concatenate as # + red + green + blue.
Worked: rgb(59, 130, 246) → #3B82F6. rgb(255, 128, 0) → #FF8000. rgb(56, 189, 248) → #38BDF8. CSS treats hex as case-insensitive; the converter displays uppercase on the swatch. You can paste #3b82f6 or #3B82F6.
Three-digit shorthand
#RGB expands by doubling each digit: #fff → #ffffff, #000 → #000000, #f80 → #ff8800. /tools/color-hex accepts both 3-digit and 6-digit input.
Shorthand can only represent channels whose two hex digits are equal (11, AA, FF). rgb(59, 130, 246) cannot shrink to three digits because 3B, 82, and F6 are not doubled pairs. Do not round a brand color to #38f and expect it to match #3B82F6.
HSL is the same color, different levers
HSL is hue 0–360°, saturation 0–100%, lightness 0–100%. #3B82F6 / rgb(59, 130, 246) is hsl(217, 91%, 60%). Lightness is the tint/shade lever: same hue, different L. The converter shows HEX, RGB, and HSL in one row so you can paste whichever the stylesheet uses.
CSS hsl() and hex paint the same sRGB pixel if the numbers match. Browser <input type="color"> is sRGB. A wide-gamut monitor may look richer than the hex; the token you ship is still the sRGB value.
Palettes this tool actually builds
Complementary: hue + 180. Triadic: the base plus hue + 120 and + 240. Analogous: ±30° around the base. Shades & tints: same hue and saturation, lightness stepped −40, −20, 0, +20, +40, clamped to 0–100. Those four strips are the whole set — not tetradic, not split-complementary.
They are starting points. Complementary orange on this blue can still fail body-text contrast. Analogous neighbors can vanish on a cheap laptop. Copy a swatch, then prove the pair on /tools/contrast-checker. Random jumps to a new hex; Save keeps swatches in that tab only.
Contrast is a second tool
WCAG 2 AA requires a contrast ratio of at least 4.5:1 for normal text and 3:1 for large text (18pt or 14pt bold). AAA is 7:1 / 4.5:1. The ratio is relative luminance, not “the hues are opposite.”
Paste foreground and background hex into /tools/contrast-checker. If #3B82F6 on white fails at 16px, darken it (lower HSL lightness) or keep the bright blue for large headings and fills. Do not “fix” a fail by telling people to zoom.
Common pitfalls
Writing rgb(59,130,246) in CSS without commas in old syntax, or mixing comma and space syntax. Assuming complementary means accessible. Rounding to 3-digit shorthand and changing the color. Treating the on-screen picker as a spectrophotometer.
Another trap: checking contrast with a formula that is not WCAG relative luminance, then arguing with /tools/contrast-checker. Use the checker for the pair; use /tools/color-hex for the conversion and the four palette strips.
rgb(59, 130, 246)=#3B82F6.#fffexpands to#ffffff; not every color has a 3-digit form.- Palettes: complementary, triadic, analogous, shades & tints only.
Worked examples
Site primary blue
rgb(59, 130, 246)#3B82F6Also hsl(217, 91%, 60%). Type #3b82f6 into /tools/color-hex and copy the RGB row to confirm.
Orange and the picker default
rgb(255, 128, 0) and rgb(56, 189, 248)#FF8000 · #38BDF8#38BDF8 is the converter’s starting color. #FF8000 is 255, 128, 0 — green is 128, not 255.
Shorthand white
#fff#ffffffEach digit duplicates. #fff is white; it is not a compressed form of #3B82F6.
Frequently asked questions
How do I convert rgb(59, 130, 246) by hand?
59 → 3B, 130 → 82, 246 → F6, then #3B82F6. The converter does this, plus HSL, in the browser.
Which palettes are generated?
Complementary (+180 hue), triadic (+120 and +240), analogous (±30), and five lightness steps at −40/−20/0/+20/+40. Random and Save are extra actions, not extra harmonies.
Does a complementary pair pass WCAG?
Not automatically. Opposite hue is not a contrast ratio. Check 4.5:1 (normal text, AA) on /tools/contrast-checker.
Why is the picker a different blue than #3b82f6?
The default is #38BDF8 (rgb(56, 189, 248)), a lighter sky. #3B82F6 is the darker primary — type it in.
Are palettes uploaded?
No. /tools/color-hex and /tools/contrast-checker run locally. Saved swatches last for that tab.
Summary
Convert each 0–255 channel to two hex digits: rgb(59, 130, 246) is #3B82F6. /tools/color-hex also expands #fff, shows HSL, and builds complementary, triadic, analogous, and lightness strips. Then check the actual text pair on /tools/contrast-checker against WCAG 4.5:1.