Color Picker & Converter

**How to Use the Color Picker and Color Converter** Whether you are a front-end developer building a React app, a UI designer working in Figma, or a brand manager trying to match corporate colors precisely, understanding color formats is essential. This free color picker and color converter lets you switch instantly between HEX, RGB, HSL, and other color formats — no installation, no sign-up, directly in your browser. **Step 1: Enter or Pick Your Color** You have two ways to start. First, you can type a known color value directly into the input field. For example, paste in the Tailwind CSS red-600 value `#dc2626`, Bootstrap's primary blue `#0d6efd`, or a brand hex code from your style guide. Second, you can use the visual color picker to click anywhere on the color wheel or gradient swatch to select a color interactively. The picker updates all output formats in real time as you drag. **Step 2: Read Your Converted Color Values** Once you enter or pick a color, the tool instantly displays the equivalent values in every supported format: - **HEX** — the six-digit hexadecimal code used in CSS, HTML, and design tools. Example: `#dc2626` - **RGB** — red, green, blue channels from 0 to 255. Example: `rgb(220, 38, 38)` - **HSL** — hue (0–360°), saturation (0–100%), lightness (0–100%). Example: `hsl(0, 75%, 51%)` - **HSV** — hue, saturation, value — widely used in design software color pickers - **CMYK** — cyan, magenta, yellow, black — for print designers preparing files for offset printing **Step 3: Copy the Format You Need** Click the copy icon next to any output field to copy that specific format to your clipboard. Paste it directly into your CSS file, Figma design token, Tailwind config, or Adobe XD component spec. **Real-World Example: Converting Tailwind CSS Colors** Tailwind CSS uses named color scales rather than raw hex codes in its config, but when you need to use a Tailwind color in a context that requires raw values — like an SVG fill, a Canvas element, or a third-party charting library — you need the conversion. Tailwind `red-600` is `#dc2626`. Entering this into the color converter gives you: - RGB: `rgb(220, 38, 38)` — use this in CSS `rgba()` when you need opacity control, like `rgba(220, 38, 38, 0.15)` for a subtle red background - HSL: `hsl(0, 75%, 51%)` — use this when you want to programmatically adjust lightness in CSS custom properties or JavaScript Similarly, Tailwind `blue-500` is `#3b82f6` → RGB `rgb(59, 130, 246)` → HSL `hsl(217, 91%, 60%)`. Knowing the HSL representation makes it easy to create a darker hover state by reducing lightness: `hsl(217, 91%, 48%)`. **Real-World Example: Brand Color Conversion** Many US brands publish their brand colors only in one format. Coca-Cola Red is officially `#F40009`. A developer building a web component needs this in RGB for a CSS variable: `rgb(244, 0, 9)`. A print designer needs it in CMYK: approximately `C:0 M:100 Y:96 K:4`. One tool, multiple outputs, zero manual calculation. **Color Format Comparison Table** | Format | Best Used For | Example | Supports Alpha? | |---|---|---|---| | HEX (`#rrggbb`) | HTML, CSS, SVG, design files | `#3b82f6` | Yes (`#rrggbbaa`) | | RGB (`rgb()`) | CSS, Canvas, JavaScript | `rgb(59, 130, 246)` | Yes (`rgba()`) | | HSL (`hsl()`) | Programmatic color manipulation in CSS | `hsl(217, 91%, 60%)` | Yes (`hsla()`) | | HSV | Photoshop, Illustrator color pickers | H:217° S:76% V:96% | No | | CMYK | Print, offset press, InDesign | C:76 M:47 Y:0 K:4 | No | | OKLCH | CSSColor Level 4, Tailwind v4 | `oklch(65% 0.17 250)` | Yes | **When to Use HEX vs RGB vs HSL** This is one of the most common questions designers and developers face when collaborating on a design system. Use **HEX** when: You are hardcoding a specific color in HTML attributes, SVG files, or email templates where only HEX is reliably supported. HEX is also the universal language between designers (Figma, Sketch) and developers. Use **RGB/RGBA** when: you need transparency control in CSS — `rgba(59, 130, 246, 0.2)` for a blue overlay - or when working with the HTML5 Canvas API where `ctx.fillStyle` accepts RGB strings natively. Use **HSL/HSLA** when: you want to build a programmatic color system. Adjusting lightness in HSL is predictable — decreasing lightness by 10% always makes the color darker - whereas darkening a HEX color manually requires recalculating all three channels. This is why modern design tokens and CSS custom properties often use HSL. Use **OKLCH** when: you are targeting modern browsers with Tailwind CSS v4, PostCSS, or native CSS Color Level 4 syntax. OKLCH is perceptually uniform - equal lightness steps look equal to the human eye - making it ideal for accessible color scales. **Common Mistakes When Working With Colors** 1. **Using HEX in JavaScript calculations without converting first.** Many developers try to do math on `#dc2626` directly, which fails. Always convert to RGB integers first: `r=220, g=38, b=38`. Then you can calculate relative luminance for WCAG contrast checking. 2. **Forgetting gamma correction in sRGB.** The sRGB color space (used by all web browsers) is gamma-encoded. When calculating WCAG 2.1 contrast ratios, you must apply gamma linearization to RGB values before computing relative luminance. A raw `R/255` calculation will give the wrong result. 3. **Confusing HSV and HSL.** Design tools like Photoshop use HSV (sometimes called HSB — Hue, Saturation, Brightness). CSS uses HSL. They are not the same: `hsl(200, 100%, 50%)` is a vivid cyan, while the equivalent in HSV would be `hsv(200, 100%, 100%)`. If you copy an HSV value from Photoshop and paste it into CSS as HSL, your color will be wrong. 4. **Assuming CMYK and RGB are directly interchangeable.** RGB is additive (light), CMYK is subtractive (ink). There is no universal conversion formula — the correct conversion depends on the color profile and the printer's ICC profile. The CMYK values in this tool are approximate and suitable for early-stage design work, not final print production. 5. **Using 3-digit HEX when alpha is needed.** `#f00` is shorthand for `#ff0000` and works in most contexts, but `#f00a` (alpha 2/3) is not universally supported. Always use 6-digit HEX (`#ff0000`) or RGBA when alpha channel support is required for cross-browser reliability. **Pro Tips for Developers and Designers** - **Building a color palette:** Start with one brand hex, convert to HSL, then create lighter tints by increasing lightness (60% → 70% → 80%) and darker shades by decreasing it (60% → 50% → 40%). This keeps your palette perceptually consistent. - **CSS custom properties with HSL:** Define your brand colors as HSL components so you can manipulate them dynamically: `--brand-h: 217; --brand-s: 91%; --brand-l: 60%;` then use `hsl(var(--brand-h), var(--brand-s), var(--brand-l))`. You can override just the lightness in a hover state without redefining the full color. - **Figma to code:** Figma's color picker shows HEX by default. Right-click any color in Figma and switch the display to HSL or RGB before copying for easier integration into CSS. - **Checking WCAG contrast:** After converting your foreground and background colors to RGB, use the WCAG relative luminance formula to verify your design meets accessibility standards. AA compliance requires a 4.5:1 ratio for normal text and 3:1 for large text. - **Tailwind v4 migration:** Tailwind CSS v4 uses OKLCH for its color system internally. Use this converter to translate your existing HEX brand colors into OKLCH format for future-proof design tokens. **How Browser Color Rendering Works** All modern browsers (Chrome, Firefox, Safari, Edge) use the sRGB color space by default. When you write `color: #3b82f6` in CSS, the browser maps those HEX bytes to the sRGB color gamut of your display. On wide-gamut displays (Apple's P3 displays on MacBooks and iPhones since 2016, and many 4K monitors), sRGB colors appear slightly less vivid than P3-native colors. The CSS Color Level 4 `display-p3` color space lets you target those wider gamuts: `color(display-p3 0.2 0.51 0.97)`. For most web applications today, sRGB HEX remains the right choice. **Color in Design Systems** Major US design systems publish their colors publicly: - **Material Design 3 (Google):** Uses tone-based palettes with tonal values from 0 (black) to 100 (white). Each palette generates tokens like `primary`, `on-primary`, `primary-container`. - **Fluent Design (Microsoft):** Publishes colors as HEX with RGB equivalents in their documentation. - **Ant Design:** Uses Bezier curve color generation — each hue has 10 generated tints and shades in hex. - **Tailwind CSS:** 22 color families, each with 11 shades (50–950) published as HEX in their docs. Converting between these systems or matching a brand color to a Tailwind palette shade is a common task where this converter saves significant time.