Color Formats
RGB Sliders
HEX Color Picker — Hex Code, RGB Palette & HSL Color Selector Online
Click the swatch to open your OS color picker (or drag the RGB sliders for fine-grained adjustment) and the page renders five output formats simultaneously: HEX (the #RRGGBB you paste into design tools), RGB (the rgb(r,g,b) function CSS understands), HSL (the hue/saturation/lightness function — easier than HEX for hand-editing palettes by sliding hue while keeping saturation and lightness fixed), bare RGB triplet (for places that want just numbers without a function wrapper), and a ready-to-paste CSS custom property declaration (`--color: #...;`). One-click copy per format. Useful when sampling a brand color from a hex code and needing to paste it as RGB into a different tool, when designing a palette by adjusting HSL hue while keeping saturation and lightness fixed, or when extracting a single colour from a design system into a stylesheet.
About this tool
The HEX-to-RGB conversion is straight bit-extraction: hex parsed as a 24-bit integer, then `(n >> 16) & 255`, `(n >> 8) & 255`, `n & 255` to extract the red, green, blue channels. RGB-to-HSL follows the algorithm first described by Joblove & Greenberg in their 1978 SIGGRAPH paper "Color spaces for computer graphics" (Computer Graphics 12(3), 20-25) and standardised in W3C CSS Color Module Level 3 (Recommendation 19 June 2018): divide each channel by 255, find the max and min, compute lightness as (max + min) / 2, derive saturation differently above vs below 50% lightness, and compute hue from which channel is max. The HSL output uses the percentage-degrees form CSS expects. The CSS custom property output is formatted as `--color: #RRGGBB;` because that's the canonical declaration form — to use it, drop it inside `:root { ... }` or any selector and reference it elsewhere as `var(--color)`. Useful for design-system color tokens, dark/light mode swatches, programmatic color generation, brand color audits (paste a hex from a competitor, see the HSL to understand if it's a saturated bright vs muted earthy), color-contrast debugging, and any moment you need a colour in a different format than where you got it.
- Native OS color picker input + manual RGB sliders for fine-tune
- Five output formats: HEX, RGB(), HSL(), bare RGB triplet, CSS custom property
- Bit-extraction HEX-to-RGB (n >> 16/8 & 255 — no string parsing per channel)
- RGB-to-HSL via Joblove & Greenberg 1978 SIGGRAPH algorithm (W3C CSS Color 3)
- Live preview swatch updates as you adjust
- One-click copy per format with confirmation flash
- CSS custom property formatted ready to paste into :root
- Reactive — all five formats recompute on every input change
- No upload — your colour selection stays in your browser
- Useful for design tokens, dark mode palettes, brand audits, contrast debugging
Free. No signup. Your inputs stay in your browser. Ads via Google AdSense (consent required).
Frequently asked questions
What's the difference between HEX, RGB and HSL — do they describe different colors?
They are three notations for the same sRGB color. HEX (`#8B5CF6`) packs the three 0–255 channel values into six hexadecimal digits and is the canonical CSS color format parsed natively by every browser since the 1990s. RGB (`rgb(139, 92, 246)`) writes the same numbers in decimal. HSL (`hsl(258°, 90%, 66%)`) re-encodes the same color as hue (0–360 degrees around the colour wheel), saturation (0–100 % how vivid vs grey) and lightness (0–100 % how close to white or black). HSL was first published by Joblove and Greenberg in their 1978 SIGGRAPH paper "Color spaces for computer graphics" (Computer Graphics 12(3), 20–25), and CSS Color Module Level 3 (W3C Recommendation 19 June 2018) standardised the `hsl()` notation browsers parse today. All three formats round-trip exactly within the 8-bit sRGB gamut.
How is contrast between text and background measured — what does 4.5:1 actually mean?
W3C WCAG 2.1 Success Criterion 1.4.3 defines contrast ratio as (L1 + 0.05) / (L2 + 0.05), where L1 is the relative luminance of the lighter colour and L2 the darker. Relative luminance per the sRGB definition (IEC 61966-2-1:1999) is L = 0.2126 · R_linear + 0.7152 · G_linear + 0.0722 · B_linear — the green coefficient dominates because human cone-cell response peaks around 555 nm. The 0.05 floor models typical viewing flare per the IEC sRGB specification. WCAG 2.1 requires a minimum of 4.5:1 for normal text and 3:1 for large text (18 pt regular or 14 pt bold) at AA conformance; AAA raises the bars to 7:1 and 4.5:1. SC 1.4.11 Non-text Contrast (carried into WCAG 2.2 on 5 October 2023) extends 3:1 to UI components and graphical objects (buttons, focus rings, chart lines).
When should I edit a palette in HSL instead of HEX or RGB?
HSL is easier to edit by hand when the goal is to vary one perceptual dimension while keeping the others constant. Rotating hue from 258° to 0° gives the same brightness and saturation in a different colour — the "around the wheel" move that HEX makes opaque. Decreasing lightness from 66 % to 30 % yields a darker version of the same hue/saturation, useful for hover-state darkening, dark-mode swatch derivation or generating a tint scale. The trade-off: HSL is not perceptually uniform, so a 10° hue shift from yellow looks bigger than a 10° shift from blue, and equal lightness values do not produce equal perceived brightness. CSS Color Module Level 4 (W3C Candidate Recommendation Draft 2 May 2026) adds `oklch()` and `oklab()` (Björn Ottosson 2020) which address that uniformity gap.
What is sRGB, and why do colors look different on my phone vs my monitor?
sRGB (IEC 61966-2-1:1999, published October 1999) is the default colour space the web has assumed since the late 1990s — D65 white point, a roughly 2.2-gamma non-linear transfer curve (precisely: linear below 0.04045 and ((R' + 0.055) / 1.055)^2.4 above), and a triangular gamut narrower than what modern displays reproduce. A colour encoded as `#FF0000` is the brightest red sRGB can represent — on a display calibrated to sRGB the result looks identical across devices; on a wide-gamut Display-P3 panel (iPhones since 2016, recent MacBooks, OLED TVs) the same numeric red is rendered as 8-bit-encoded sRGB red unless the page opts into a wider gamut via `color(display-p3 …)`. CSS Color Module Level 4 added the `color()` function to request explicit colour spaces (Display-P3, ProPhoto RGB, Rec2020) for colors that fall outside sRGB.
Does <input type="color"> produce a format that pastes directly into CSS?
Yes. The WHATWG HTML Living Standard defines the `value` of `<input type="color">` as a seven-character string starting with `#` followed by six lowercase hex digits (for example `#8b5cf6`) in the Limited sRGB colour space — 8 bits per RGB channel, no alpha. That string is a valid CSS `<hex-color>`, so it pastes straight into `color: …;` or `background: …;` declarations. Browser support is universal across Chrome, Firefox, Safari and Edge as of May 2026. Mobile browsers typically delegate to the OS native picker; desktop Chrome and Edge ship an HSL/HEX/RGB tabbed picker; Firefox uses the OS picker on Windows and macOS. The `colorspace` and `alpha` attributes were added to the HTML spec in 2024 to allow wider-gamut and alpha-channel picking, with browser rollout still in progress.
Sources (6)
- Joblove, G. H., & Greenberg, D. (1978). Color spaces for computer graphics — first published description of the HSL (Hue, Saturation, Lightness) model alongside HSV, defined to expose color in dimensions matching how illustrators describe pigment mixing (lightness centred at L = 0.5 so achromatic greys sit at the midpoint, distinguishing HSL from Smith's HSV which puts white at V = 1 and primaries at V = 1). Computer Graphics, vol. 12, no. 3, pp. 20–25 (Proceedings of the 5th annual ACM SIGGRAPH conference, August 1978).
- World Wide Web Consortium (W3C) (2018). CSS Color Module Level 3 — standardised the `hsl()`, `hsla()`, `rgba()` functional notations and the percentage-degrees form (`hsl(h, s%, l%)`) that browsers and design tools parse today; defines the 6-digit `#RRGGBB` hex syntax along with `#RGB` shorthand. W3C Recommendation, 19 June 2018 (replaces the 2003 Working Draft).
- World Wide Web Consortium (W3C) (2026). CSS Color Module Level 4 — extends Level 3 with perceptually uniform color functions: `oklch()` and `oklab()` (Björn Ottosson, 2020 perceptual-uniformity refinement of CIE Lab), `lab()` and `lch()` (CIE 1976 L*a*b*), `hwb()` (Hue-Whiteness-Blackness, simpler than HSL for designers), and the `color()` function for Display-P3 / ProPhoto / Rec2020 gamuts beyond sRGB. W3C Candidate Recommendation Draft, 2 May 2026 (URL slug CRD-css-color-4-20260502); first reached Candidate Recommendation 5 July 2022.
- WHATWG (Web Hypertext Application Technology Working Group) (2026). HTML Living Standard — `<input type="color">` represents a color well control; its `value` is the seven-character lowercase serialization of a simple color (`#` followed by six hex digits, e.g. `#8b5cf6`), restricted to 8 bits per RGB component in the Limited sRGB color space; the WICG Async Clipboard API powers the one-click copy. WHATWG HTML Living Standard, continuously published at html.spec.whatwg.org; input type=color section (§4.10.5.1.15 as of May 2026).
- International Electrotechnical Commission (IEC) (1999). IEC 61966-2-1:1999 Multimedia systems and equipment — Colour measurement and management, Part 2-1: Default RGB colour space (sRGB) — defined the gamut, white point (D65), and the non-linear transfer function (γ ≈ 2.2 piecewise: linear below 0.04045, ((R'+0.055)/1.055)^2.4 above) that every browser, OS color picker, and CSS implementation treats as the default unless a wider color space is requested explicitly. International Electrotechnical Commission, published October 1999; Amendment 1 published January 2003 (adds bg-sRGB extended-gamut variant).
- World Wide Web Consortium (W3C) (2018). WCAG 2.1 Success Criterion 1.4.3 Contrast (Minimum) — text contrast ratio computed as (L1 + 0.05) / (L2 + 0.05) where L is sRGB relative luminance L = 0.2126·R_linear + 0.7152·G_linear + 0.0722·B_linear; minimum 4.5:1 for normal text and 3:1 for large text (18 pt / 14 pt bold); the 0.05 floor models typical viewing flare from the IEC sRGB specification. W3C Recommendation 5 June 2018; SC 1.4.11 Non-text Contrast (carried into WCAG 2.2 Recommendation 5 October 2023) extends 3:1 to UI components and graphical objects.
These are the original publications the formulas in this tool are based on. Locate them by journal name and year on Google Scholar or PubMed.