Color Converter
Convert colors between HEX, RGB, RGBA, HSL, and HSLA formats instantly online. Supports named CSS colors. Free color converter tool — no signup required.
Color Input
Related Tools
Unix Timestamp
Convert Unix timestamps to UTC, local time, and ISO 8601 instantly. Auto-detects seconds vs milliseconds.
Base Converter
Convert numbers between decimal, hex, binary, and octal instantly. Free and runs in your browser.
Hash Generator
Generate SHA-1, SHA-256, SHA-384, and SHA-512 hashes instantly. Runs entirely in your browser using the Web Crypto API.
Digital color is expressed in multiple notations depending on the context: HEX triplets (#FF6B35) in CSS and HTML, RGB tuples in graphics APIs and CSS, HSL (hue, saturation, lightness) for programmatic color manipulation, and named CSS keywords (coral, rebeccapurple) defined in the CSS Color Level 4 specification. Each notation represents the same sRGB value differently.
Designers work in HEX when writing CSS, RGB when using canvas or WebGL APIs, and HSL when generating color palettes algorithmically (rotating hue while holding saturation and lightness constant). Figma exports HEX; CSS filter functions use HSL percentages; Android XML themes use #AARRGGBB hex with alpha. Conversion between these is a constant friction point.
This tool converts among HEX, RGB, HSL, and named CSS colors instantly, with a live color swatch that updates as you type so you can visually confirm the result. All math runs in the browser using standard sRGB conversion formulas with no external color library dependency.
Common Use Cases
Translating Figma exports to CSS variables
Figma's inspect panel outputs colors as HEX values. Design systems defined with CSS custom properties often store both HEX and HSL variants (--brand-primary: #7c6aff; --brand-primary-hsl: 250 100% 71%) so components can manipulate lightness in calc() expressions. Converting once here populates both variable values.
Generating accessible color palette variants
WCAG contrast ratio calculations work on relative luminance derived from linear RGB. When building accessible UI libraries, converting a brand HEX color to HSL lets you programmatically shift lightness (hsl(250, 80%, 30%) vs hsl(250, 80%, 70%)) to produce dark and light variants that maintain the hue identity.
Matching design tokens across platforms
iOS uses UIColor(red:green:blue:alpha:) with decimal RGB components (0.0–1.0), while web uses 0–255 integers. A designer delivering #3D9BE9 needs it expressed as rgb(61, 155, 233) for Android XML and as (0.239, 0.608, 0.914) for iOS Swift code. Converting via this tool covers all three at once.
Verifying color accuracy in print workflows
Print designers working with Pantone spot colors often receive HEX approximations for screen display. Converting a hex value to RGB here and checking it against the Pantone color bridge guide confirms whether the screen representation is within acceptable tolerance before sending files to a print service provider.
How to Use the Color Converter
- Enter any color in the input field — HEX, RGB, HSL, or a named CSS color.
- All formats appear instantly below with a live color preview swatch.
- Click Copy next to any row to copy that specific format.
- Use Load Example to see the accent color
#7c6affconverted.
Supported Input Formats
- HEX —
#rgb,#rrggbb,#rrggbbaa - RGB / RGBA —
rgb(255, 0, 0),rgba(255, 0, 0, 0.5) - HSL / HSLA —
hsl(0, 100%, 50%),hsla(0, 100%, 50%, 0.5) - Named CSS colors —
red,purple,cornflowerblue, etc.