Color Converter for Design Systems: HEX, RGB, HSL Workflow Guide
Use a color converter to maintain consistent colors across your design system. Convert between HEX, RGB, and HSL for CSS, Figma, Tailwind, and design tokens.
The Problem
Your designer hands you a Figma file using HEX color codes. Your CSS uses HSL for theming. Your Tailwind config needs RGB values. Your brand guidelines specify Pantone colors with CMYK values. Every handoff means manually converting colors between formats — a tedious process that introduces typos and inconsistencies across your design system.
Why This Matters
Modern design systems span multiple tools and formats: Figma uses HEX, CSS custom properties work best with HSL for dynamic theming, Tailwind needs specific RGB or HEX values, and native mobile apps use different color models. Inconsistent color conversion introduces subtle visual bugs — slightly wrong shades, accessibility contrast failures, and brand inconsistency that accumulates over time. A systematic color conversion workflow keeps your design system aligned across every surface.
Step-by-Step Instructions
Extract colors from your design tool
In Figma, select any element and check the Fill panel for the HEX value. In Sketch, use the color picker. Copy the HEX color code. If your designer sends a color in a format you don't recognize (e.g., rgb(59, 130, 246)), that's fine — the converter handles all input formats.
Convert to all required formats at once
Paste the color into the Color Converter below. It instantly outputs HEX, RGB, and HSL equivalents simultaneously. No need to run multiple conversions — grab all three formats at once and store them in your design tokens file.
Define CSS custom properties with HSL values
Use the HSL output for your CSS custom properties. HSL is ideal for theming because you can create lighter/darker variants programmatically: --color-primary: hsl(217, 91%, 60%), then --color-primary-light: hsl(217, 91%, 75%). This makes dark mode and hover states trivial to implement without additional conversions.
Configure Tailwind with exact HEX values
In tailwind.config.js, use the HEX values from your conversion to define custom brand colors. This ensures pixel-perfect alignment between your design tool and your production CSS: colors: { brand: { 500: '#3B82F6', 600: '#2563EB' } }. The HEX format is universally supported and the most explicit.
Verify accessibility contrast ratios
After converting, verify that foreground/background color pairs meet WCAG contrast requirements. Take your RGB values and calculate the relative luminance. The WCAG AA standard requires a contrast ratio of at least 4.5:1 for normal text and 3:1 for large text. Document failing combinations in your design system's accessibility notes.
Try It Now — Color Converter
Open full page →All processing happens in your browser — no data is sent to any server.
Before & After Example
Primary brand color from Figma: #3B82F6 Needed for: - CSS custom property (HSL preferred for theming) - Tailwind config (HEX) - React Native StyleSheet (RGB 0-1 range) - Documentation (all formats)
HEX: #3B82F6
RGB: rgb(59, 130, 246)
HSL: hsl(217, 91%, 60%)
CSS custom property:
--color-primary: hsl(217, 91%, 60%);
--color-primary-dark: hsl(217, 91%, 45%); /* manual -15% lightness */
Tailwind config:
primary: { DEFAULT: '#3B82F6', dark: '#1D4ED8' }
React Native:
{ r: 0.231, g: 0.510, b: 0.965 }
Frequently Asked Questions
When should I use HEX vs RGB vs HSL in CSS?
HEX is most common and universally supported — use it in Tailwind configs and when copying from design tools. RGB is useful when you need to manipulate alpha channel: rgba(59, 130, 246, 0.5). HSL is best for systematic theming because lightness and saturation are human-readable — creating a dark mode variant is as simple as adjusting the L value.
How do I handle colors in design tokens for multi-platform systems?
Store all colors as HEX in your design tokens file (e.g., tokens.json). Transform them to platform-specific formats during the build step using tools like Style Dictionary. This way the source of truth is always HEX, and each platform (web, iOS, Android) gets the format it needs without manual conversion.
How do I find the right color variant for dark mode?
Convert your light mode color to HSL, then adjust the Lightness value. For dark backgrounds, increase lightness to maintain contrast — if your light mode uses hsl(217, 91%, 60%), your dark mode might use hsl(217, 91%, 75%). Test each variant against your background colors to ensure WCAG contrast compliance.
Related Workflows
Want the full Color Converter experience?
Open the standalone tool for more space, keyboard shortcuts, and additional features.
Open Color Converter →