All processing runs in your browser — no files or inputs are uploaded to a server.
Paste any one of `#06B6A4`, `rgb(6, 182, 164)`, or `hsl(174, 94%, 37%)` and all three formats populate at once, with a live color swatch and the converted values copy-ready. The three-digit hex shorthand (`#0F0`) is accepted; alpha forms (`rgba(...)`, `hsla(...)`, 8-digit hex `#RRGGBBAA`) parse the alpha channel but the converter focuses on opaque colors — strip alpha before pasting if you only want the base color.
Reach for this when picking up a color from one tool and pasting it into another that prefers a different format — Figma exports as hex, browsers prefer modern CSS color syntax, design tokens commonly use HSL because lightness adjustments stay perceptually close to "the same color, lighter / darker". Brand guidelines often list a color in only one format; the converter lets you grab whichever one your editor or CSS-in-JS library wants. Everything runs in the browser.
#06B6A4
HEX: #06B6A4 RGB: rgb(6, 182, 164) HSL: hsl(174, 94%, 37%)
A typical teal accent color. The HEX form is shortest for inline copy-paste; RGB is closer to how the GPU stores the value; HSL describes the *perceived* color (teal-cyan family, very saturated, on the darker side of mid). Designers often work in HSL because nudging the L channel ±10 keeps the brand identity intact while creating hover / disabled states.
#0F0
HEX: #00FF00 RGB: rgb(0, 255, 0) HSL: hsl(120, 100%, 50%)
`#0F0` expands to `#00FF00` — each digit duplicates (`0`→`00`, `F`→`FF`). The shorthand can only express colors where each channel's two hex digits are identical, so 4,096 of the 16,777,216 sRGB colors. Fine for primary tones and accent colors; useless for anything subtle.
hsl(174, 94%, 47%) (original was hsl(174, 94%, 37%), L raised by 10)
HEX: #0FE9D0 RGB: rgb(15, 233, 208) HSL: hsl(174, 94%, 49%)
Bumping the L channel from 37% to 47% produces a noticeably lighter teal of the same hue and saturation — a textbook "lighter variant" for a button hover or a notification background. Doing the same operation in HEX or RGB needs three coordinated changes; in HSL it is one slider. The output L is `49%` (not exactly `47%`) because the round-trip through RGB loses a bit of precision.
HEX and RGB are integer-quantized (0–255 per channel = 8 bits); HSL is real-valued. Converting `rgb(6, 182, 164)` → HSL → RGB lands you back at exactly `rgb(6, 182, 164)`. Converting `hsl(174, 94%, 37%)` → RGB → HSL might give you `hsl(174.3, 93.7%, 36.9%)` rounded to `hsl(174, 94%, 37%)`. The rounding accumulates over multiple conversions, so do not round-trip a color a dozen times — keep the canonical form (usually HEX or original HSL) as source of truth.
Both describe a color as hue + saturation + a brightness-like third channel, but the third channel differs. **HSL** uses Lightness — 0% is black, 50% is the pure hue, 100% is white. **HSV / HSB** uses Value (brightness) — 0% is black, 100% is the pure hue. So in HSL, "50% lightness, 100% saturation" is the fully saturated color; in HSV, "100% value, 100% saturation" is the same color. Photoshop, Figma, and most design tools default to HSV; CSS uses HSL. The conversion is straightforward but not identity — `hsl(174, 94%, 37%)` ≠ `hsv(174, 94%, 37%)`.
OKLCH (the L*a*b* family in CSS Color Module Level 4, supported by all modern browsers since 2023) describes a color as Lightness + Chroma + Hue but in a *perceptually uniform* space. Equal numeric distances correspond to equal perceived color differences — a property neither HSL nor RGB has. For design tokens it is strictly better: `oklch(70% 0.15 200)` darkened to `oklch(60% 0.15 200)` actually looks "the same color but darker" in a way `hsl(... 60%)` does not. This tool covers HEX / RGB / HSL only. For OKLCH, paste into the browser DevTools console (`getComputedStyle(document.body).color` accepts modern syntax) or use a dedicated tool.
It parses alpha from `rgba(...)`, `hsla(...)`, and 8-digit hex (`#RRGGBBAA`), but outputs focus on opaque values because most workflows want the underlying color separately from transparency. For full alpha support, write CSS directly: `rgb(6 182 164 / 0.5)` is the modern syntax (CSS Color Level 4) and works in all current browsers. Photoshop and Figma also expose alpha as a separate slider so the round-trip with this tool — `extract base color → tweak → paste back with original alpha` — stays clean.
Two main reasons. **Color space**: `#06B6A4` is interpreted as sRGB by default, but a P3 (wide-gamut) display can render a more saturated version of the same code if it interprets the color as P3, and modern Apple devices increasingly do. **Calibration**: even within sRGB, every monitor / phone screen has slight factory variation in white point and gamma curve. For brand-critical work, view the design on a calibrated display (Datacolor SpyderX or X-Rite i1) or specify in a wide-gamut color space (`color(display-p3 0.5 0.7 0.65)`) so the rendering pipeline can correct for the target gamut.
Not directly — the converter shows formats but not the WCAG contrast ratio between two colors. For accessibility checks use the Color Contrast tool on this site, which computes the relative luminance per WCAG 2.1 and tells you whether a foreground / background pair passes AA (4.5:1 for normal text) or AAA (7:1). Note that WCAG 3 (in draft) will replace the ratio with APCA, a perceptually-tuned contrast formula — relevant when the same hex pair passes WCAG 2 but reads as low contrast to users.
A color on screen is fundamentally three numbers — the intensities of the red, green, and blue subpixels. **HEX** writes those three numbers in compact 8-bit hexadecimal (`#06B6A4` = R 0x06, G 0xB6, B 0xA4); shorthand `#RGB` duplicates each nibble. **RGB** writes them as decimal 0–255 (`rgb(6, 182, 164)`) with an optional alpha channel. Both are tied directly to how the GPU renders the pixel, but neither maps cleanly to *human* color thinking — "is this color more saturated than that one?" needs a calculator in RGB space.
**HSL** (Hue, Saturation, Lightness) and its sibling **HSV / HSB** rearrange the same color into axes humans actually use. Hue is a 0°–360° wheel around red-yellow-green-cyan-blue-magenta-red. Saturation measures how far from gray the color is. Lightness or Value measures brightness — with subtle differences (in HSL, 50% L is the pure hue; in HSV, 100% V is). CSS uses HSL; Photoshop, Figma, and most design pickers default to HSV. Both are derivable from RGB with simple formulas and round-trip cleanly when the integer quantization permits.
Three adjacent color spaces matter in modern web work. **sRGB** is the default color space assumed by browsers and most monitors — every HEX or RGB value in this tool is sRGB unless tagged otherwise. **Display P3** is a wide-gamut space supported by recent Apple devices and high-end Android; CSS Color Level 4 syntax `color(display-p3 r g b)` lets you author specifically for it. **OKLCH** is a perceptually uniform space introduced in CSS Color Level 4 — equal numeric distances correspond to equal perceived color differences, which makes it the right basis for design token systems that need consistent contrast and lightness ladders across hues. This converter sticks to the sRGB-bound formats most teams actually paste between Figma and CSS; for serious palette engineering, jump to OKLCH-aware tooling once you have the brand colors settled here.
Design linear and radial CSS gradients visually. Drag color stops, adjust the angle, and copy the ready-to-use background CSS.
Check WCAG contrast ratios between two colors. Instant AA / AAA pass status for normal text, large text, and UI components.
Resize while keeping the aspect ratio — enter width or height, get the other side. Includes 16:9, 4:3, 21:9, 1:1 presets and the CSS aspect-ratio declaration.
Convert text between camelCase, PascalCase, snake_case, kebab-case, CONSTANT_CASE, and Title Case.
