CSS Color Converter
Convert colors between HEX, RGB, HSL, HSV, CMYK, and OKLCH formats instantly.
#6366f1
rgb(99, 102, 241)hsl(239, 84%, 67%)239°
Hue
59%
Saturation
95%
Value
hsv(239, 59%, 95%)59%
Cyan
58%
Magenta
0%
Yellow
5%
Key
cmyk(59%, 58%, 0%, 5%)0.55
Lightness
0.20
Chroma
280°
Hue
oklch(0.55, 0.2, 280)Why Color Formats Matter
Different tools and contexts need different color formats. Designers think in HSL. Developers copy hex codes from Figma. Print designers need CMYK. Modern CSS supports OKLCH for perceptually uniform color spaces.
This converter shows you all formats at once. Change one value and everything updates. No mental math, no switching between tabs.
Color Format Reference
#6366f1Six-digit code representing red, green, and blue values. The standard for web design. Short form (#63f) works when pairs repeat (#6633ff).
rgb(99, 102, 241)Additive color model - screens mix red, green, and blue light. Each channel ranges from 0 to 255. Add alpha for transparency: rgba(99, 102, 241, 0.5)
hsl(239, 84%, 67%)More intuitive than RGB. Hue is the color (0-360 degrees), saturation is intensity (0-100%), lightness is brightness (0-100%). Easier to adjust mentally.
oklch(0.55, 0.2, 280)Modern color space designed for perceptual uniformity. Equal changes in values produce equal perceived changes. Best for smooth transitions and accessible palettes.
hsv(239, 59%, 95%)Similar to HSL but "value" represents brightness differently. Common in color pickers and design tools. Value is the maximum RGB component.
cmyk(59%, 58%, 0%, 5%)Subtractive color model for print. Ink absorbs light - more color means darker results. The "key" (black) channel adds depth and saves on colored ink.
When to Use Each Format
HEX for quick styling
Short, copy-paste friendly, universally supported. Use for solid colors in CSS and when sharing colors with other developers.
HSL for adjustments
Need a darker version? Reduce lightness. Want it less saturated? Lower the saturation. Much easier than guessing hex values.
RGB/RGBA for transparency
When you need alpha channels and older browser support. RGBA works everywhere, unlike the newer hex-with-alpha syntax.
OKLCH for modern projects
If you're building something new and don't need legacy support, OKLCH produces more natural color scales and gradients.
Common Questions
Why do colors look different on different screens?
Monitor calibration, color profiles, and display technology all affect how colors appear. sRGB is the web standard, but wide-gamut displays show more saturated colors. Always test on multiple devices.
What's the deal with OKLCH?
OKLCH is based on human color perception, not how screens emit light. Two colors with the same L value appear equally light to human eyes. This makes it ideal for generating accessible color scales.
Can I convert CMYK back to RGB perfectly?
Not exactly. CMYK has a smaller color gamut than RGB. Some vibrant screen colors can't be reproduced in print. The conversion is an approximation.
Other Free Tools
CSS Color Palette Generator
Generate harmonious color palettes from images or color theory rules. Export CSS variables and Tailwind config. Free online color palette generator for web design.
Color Contrast Checker
Test color combinations for WCAG AA and AAA accessibility compliance. Ensure readable text and UI colors. Free online color contrast checker for web designers.
Tint & Shade Generator
Generate tints (lighter) and shades (darker) of any color across multiple steps. Build color scales for design systems. Free online tint shade tool.
CSS Gradient Generator
Create linear, radial, and conic gradients with live preview. Generate CSS gradient code for backgrounds and UI. Free online gradient maker.
CSS Mesh Gradient Generator
Create stunning multi-point mesh gradients with smooth color transitions. Generate CSS and SVG mesh gradients. Free online mesh gradient tool.
Dark Mode CSS Generator
Generate prefers-color-scheme dark mode CSS from your color palette. Create accessible dark themes instantly. Free online dark mode CSS generator.
Google Fonts Pairing Tool
Discover and preview harmonious Google Fonts combinations. Find perfect heading and body pairings. Free online font pairing tool.
Letter Spacing & Line Height Visualizer
Adjust and preview letter-spacing and line-height values for perfect typography rhythm. Free online type visualizer.
CSS Filter Generator
Apply blur, brightness, contrast, hue-rotate, and more filters visually. Generate CSS filter code instantly. Free online CSS filter generator.
CSS Button Generator
Design beautiful buttons with hover effects, gradients, and shadows. Generate production-ready CSS button styles. Free online CSS button maker.
CSS Border Radius Generator
Create asymmetric border-radius values with live preview. Generate organic, smooth corner shapes for modern UI design. Free online border radius tool.
CSS Box Shadow Generator
Create multi-layer box shadows with blur, spread, and inset options. Generate beautiful shadows for buttons, cards, and UI elements. Free online CSS shadow tool.
Glassmorphism Generator
Create glassmorphism effects with backdrop-filter, blur, and transparency. Generate modern frosted glass CSS. Free online glassmorphism generator.
Neumorphism Generator
Create soft UI neumorphic effects with subtle shadows and highlights. Generate modern soft design CSS. Free online neumorphism generator.
CSS Pattern Generator
Generate repeating patterns — stripes, dots, checkerboard, waves — using CSS and SVG. Free online CSS pattern generator for backgrounds.
CSS Background Noise Generator
Generate subtle noise and grain textures using CSS and SVG filters. Add depth and texture to backgrounds with this free online CSS noise generator.
CSS Text Shadow Generator
Create multi-layer text shadows with blur, spread, and color. Generate beautiful text effects. Free online CSS text shadow generator.
CSS Shape Generator
Create triangles, arrows, speech bubbles, and more using pure CSS. Generate shape code instantly. Free online CSS shape maker.
CSS Clip Path Maker
Draw custom clip-path shapes — polygons, circles, ellipses — with visual editor. Generate CSS clip-path code instantly. Free online clip path generator.
CSS Transition Previewer
Preview and compare CSS transition easing functions. Test built-in and custom cubic-bezier curves. Free online transition previewer.
Cubic Bezier Editor
Visually create custom cubic-bezier easing functions. Generate smooth, natural animations. Free online cubic-bezier editor for CSS transitions.
CSS Animation Generator
Create CSS keyframe animations with live preview. Generate smooth, performant animations for web projects with customizable easing, duration, and iteration. Free online CSS animation builder.
CSS Loader Generator
Create pure CSS loading spinners, dots, and bars. Customize size, color, and animation speed. Free online CSS loader generator.
CSS Grid Generator
Create CSS Grid layouts visually. Generate grid-template-areas, gap, and responsive breakpoints. Free online CSS Grid layout builder.
Flexbox Playground
Experiment with Flexbox properties interactively. Generate flex container and item CSS with live preview. Free online Flexbox learning tool.
CSS Spacing Scale Generator
Generate consistent spacing and size scales for design tokens. Create 4px, 8px, 16px base scales. Free online spacing scale generator.
Fluid Space Calculator
Generate clamp()-based responsive spacing that scales with viewport. Create fluid design systems. Free online fluid space calculator.
Fluid Typography Calculator
Create responsive font sizes using CSS clamp() for smooth scaling between breakpoints. Free online fluid typography generator.
PX to REM Converter
Convert pixels to REM and EM units with configurable root font size. Generate accessible, scalable CSS. Free online px to rem converter.
Viewport Unit Converter
Convert between vw, vh, vmin, vmax, and px units. Generate responsive viewport-based CSS. Free online viewport unit converter.