NodlumeColor converter: hex to RGB, RGB to hex, and HSL
Paste a hex code, an rgb() or hsl() value, or a CSS color name, and get the same color back in every notation with one click to copy each — plus its WCAG contrast as text on white and black, and the named color it matches, if any. Then turn it into a full eight-role interface palette. No account needed.
Read as a hex code.
- As text on white
- 6.29:1 · AA body text
- As text on black
- 3.34:1 · AA large text only
#4f46e5rgb(79, 70, 229)hsl(243, 75%, 59%)0.310, 0.275, 0.898--color-primary: #4f46e5;No CSS color name paints exactly this value — the named-color reference lists the 139 that exist. Hue 243°.
Every notation, exactly
Hex, rgb(), hsl(), 0–1 channel values and a ready CSS custom property, all derived from one normalized color — so the copies never disagree with each other.
Contrast as you go
The converted color is measured as text on white and on black against the WCAG AA thresholds, so you learn whether it can be a text color before you paste it into a stylesheet.
Names both ways
Type a CSS keyword to get its codes, or paste a code and see whether one of the 139 named colors paints it — linked to its reference page.
Hex, RGB and HSL, answered
- How do I convert hex to RGB?
- A hex code is three pairs of base-16 digits, one per channel. Convert each pair to decimal: #add8e6 is ad → 173, d8 → 216, e6 → 230, so rgb(173, 216, 230). Three-digit hex doubles each digit first (#fff is #ffffff). This converter does the arithmetic and shows the result the moment you paste.
- How do I convert RGB to hex?
- Write each of the three 0–255 channels in two base-16 digits and join them after a #: rgb(79, 70, 229) is 4f, 46, e5 → #4f46e5. Values under 16 get a leading zero (rgb(0, 128, 0) is #008000). Percent channels (rgb(100% 0% 0%)) are scaled to 0–255 first.
- What is the difference between HSL and RGB?
- RGB and hex describe how much red, green and blue light a pixel emits. HSL describes the same color by hue (an angle on the color wheel), saturation and lightness. Browsers treat them identically; HSL is easier to reason in when you want a lighter, darker, muted or opposite version of a color, because you change one number.
- Does this convert CSS color names?
- Yes. Type any of the 139 distinct CSS color keywords (lightblue, rebeccapurple, grey) and the tool returns its hex, RGB and HSL. It also works in reverse: when a converted value exactly matches a keyword, the keyword is named and linked to its reference page.
- Why won't it convert rgba() or oklch()?
- Because it could not do so honestly. An alpha channel has no hex-code equivalent without losing the transparency, and oklch() or lab() values can name colors outside the sRGB gamut that hex cannot represent. Rather than silently approximate, the tool declines and says so.
One color is a seed, not a palette
An interface needs eight roles — primary, secondary, accent, background, surface, text, muted and border — and a harmony rule to relate them. The palette generator grows that set from the color you just converted; the theme generator turns it into a Tailwind v4 stylesheet with dark mode derived and checked. For ready-made starting points, browse the curated palettes by mood.