Hex to RGB Converter

Convert hex codes to RGB, RGBA, HSL, HSB & CSS variables โ€” with tonal palette, harmonies, and WCAG contrast

#D4AF37rgb(212, 175, 55)hsl(46, 65%, 52%)Warm ยท YellowText on WhiteText on Blackฮฑ = 1100%on transparentL:15%#3F340DL:30%#7E671BL:50%#D2AC2DL:70%#E4CD81L:85%#F2E6C0
Metals & Neutrals
Naturals & Earths
Sky & Water

Input

With or without # ยท 3-digit or 6-digit โ€” both supported

Controls the alpha value in RGBA and the opacity preview

Channel Breakdown (RGB)

Red

212

83%

Green

175

69%

Blue

55

22%

HSL & HSB Breakdown

Hue

46ยฐ

HSL Sat.

65%

Lightness

52%

Hue

46ยฐ

HSB Sat.

74%

Brightness

83%

CSS Output

๐ŸŽจ Tonal Palette โ€” same hue and saturation, varying lightness. Click to load.

๐Ÿ”„ Color Harmonies

#D4AF37
Base

Click any harmony swatch to load it as your working color.

โ™ฟ WCAG Contrast Ratios

This color on White

Aa Sample Text

2.10:1

Fail

This color on Black

Aa Sample Text

9.99:1

AAA

AA = 4.5:1 (normal text) ยท AAโ˜… = 3:1 (large text only) ยท AAA = 7:1 (enhanced) ยท Fail = below 3:1

๐Ÿ“‹ Color Format Quick Reference

FormatExampleBest Used ForBrowser Support
HEX#D4AF37HTML attributes, CSS backgrounds, design toolsUniversal (since CSS1)
RGBrgb(212, 175, 55)CSS, canvas API, image processing pipelinesUniversal (since CSS2)
RGBArgba(212, 175, 55, 0.5)Overlays, shadows, glassmorphism, semi-transparent UIUniversal (since CSS3)
HSLhsl(46, 61%, 52%)Design systems, tonal scales, theming โ€” most human-intuitiveUniversal (since CSS3)
HSB / HSV46ยฐ 61% 83%Photoshop, Illustrator, Figma color pickers โ€” not native CSSDesign apps only
CSS Vars--color: #D4AF37Design tokens, component libraries, theming systemsIE11+ (partial), all modern

๐ŸŽฏ A Simple Example: Building a CSS Design Token from a Brand Hex โ€” Step by Step

Your designer sends a brand spec with the hex code #E63946. You need it in every CSS format for a design system. Here's the workflow:

1๏ธโƒฃ Type #E63946 in the hex field โ€” the SVG instantly shows the vivid red swatch, its RGB breakdown (R: 230, G: 57, B: 70), and the tonal strip showing five lightness variants.

2๏ธโƒฃ Click Copy RGB โ†’ paste rgb(230, 57, 70) into your CSS for solid backgrounds and borders.

3๏ธโƒฃ Drag Opacity to 15%, then Copy RGBA โ†’ rgba(230, 57, 70, 0.15) for a soft alert tint โ€” the checkerboard preview shows exactly how it'll look over a light background.

4๏ธโƒฃ Click Copy CSS to grab all three custom properties at once โ€” paste directly into your :root {} block to create a reusable token.

5๏ธโƒฃ Open the Triadic harmony panel โ€” the two triad colors (green and blue) give you a balanced 3-color scheme for data visualisation or a multi-series chart.

Pro tip: HSL is the designer's power format. Once you know the hue (46ยฐ) and saturation (61%), you can generate a full tonal scale by only changing the lightness โ€” no new hex hunting, and the tonal palette above does it for you automatically.

Data Source: W3C CSS Color Level 4 Specification โ€ข Public domain โ€ข Solo-developed with AI

Find Color Reference Tools on Amazon

As an Amazon Associate, I earn from qualifying purchases.

Lab Notes

The Six Characters That Built the Web: A History of Hex Color

A Shorthand for Light: Every color on a modern screen is a mixture of red, green, and blue light โ€” the additive primaries that LCD and OLED panels mix at the pixel level. Each channel carries 256 possible intensities (0โ€“255 in decimal), which maps cleanly to two hexadecimal digits (00โ€“FF). The notation #RRGGBB packs all three channels into six characters, making it easy to type, copy, and embed in HTML without needing a separate table. The entire visible palette of 16,777,216 colors fits in a format shorter than most passwords โ€” a remarkable compression of human vision into text.

From Mosaic to W3C: The hex format was popularized in 1994 by the NCSA Mosaic browser, which borrowed the convention from the X Window System's color naming infrastructure. Early HTML pages used it informally in attributes like bgcolor="#000080". By 1996, HTML 3.2 formally standardized the notation, and it became permanent web infrastructure. Thirty years later, every browser still parses the same six-character strings โ€” a rare case of computing backwards-compatibility surviving hardware generations, display technologies, and complete browser rewrites.

Why RGB, HSL, HSB, and RGBA All Matter: RGB is hardware-native โ€” monitors literally mix those three light beams. But designers think differently. HSL (Hue, Saturation, Lightness) aligns with human colour intuition: rotate the hue and you change the colour family; adjust the lightness and you move through the tonal scale without hunting for new numbers. HSB (Hue, Saturation, Brightness) is the format Photoshop and Illustrator use โ€” same hue axis, but brightness replaces lightness, making it more intuitive for painters who think in terms of how much light a surface reflects. RGBA adds the alpha channel for transparency โ€” critical for overlays, glassmorphism, and shadows that solid hex codes cannot express. Modern design systems routinely use all four formats in the same file, each for a different purpose.

Harmonies, Contrast, and Design Systems: The three color harmony models (complementary, triadic, analogous) come from 19th-century colour theory โ€” specifically Johannes Itten's 1961 codification of Goethe's earlier wheel. The WCAG contrast ratio standard, meanwhile, comes from the W3C's Web Content Accessibility Guidelines, which require a minimum 4.5:1 ratio for readable body text and 3:1 for large headings. The 3-digit hex shorthand #RGB (where each digit doubles, so #F0C becomes #FF00CC) was introduced in CSS Level 1 and remains fully supported โ€” a small but useful compression when building design tokens and palette files.

๐Ÿพ From the Lab Cat's Chromatic Observation Division: Humans invented six-character codes to classify colours as if cataloguing museum specimens. I find this admirable โ€” I classify colours too, but my vocabulary consists of: "sunlit dust," "warm laptop," and "suspicious." The code #FF6B35 describes what I call "suspicious orange." It appears frequently on Amazon delivery boxes, which I treat as both territorial threat and structural opportunity. The WCAG contrast requirement of 4.5:1 is also interesting โ€” I maintain a strict personal standard of 1:1 (everything is equivalent if you sit on it). I shall now occupy your color picker and redefine your entire palette as variations of "grey, but warm." ๐ŸŽจ๐Ÿพ

In short: These tools are for education and curiosity only. Always verify information independently and consult professionals before making important decisions.

Riatto.ovh ยฉ 2025 โ€“ 2026. Designed and maintained by a solo developer with AI.

Privacy Policy

Also by us: Purr.ovh ยท Snackword.ovh ยท Substack