Color Format Conversion Guide: HEX, RGB, HSL, OKLCH All Covered

Color Format Overview

Common color formats in web development:

Format	Example	Characteristics
HEX	`#FF6B35`	Most common, compact
RGB	`rgb(255, 107, 53)`	Intuitive, channel values 0-255
HSL	`hsl(16, 100%, 60%)`	Hue/Saturation/Lightness, intuitive for adjustments
OKLCH	`oklch(0.68 0.17 37)`	Perceptually uniform, modern CSS recommended

Different formats represent the same color—just different coordinate systems.

HEX Format Explained

HEX uses hexadecimal to represent the three RGB channels:

#FF6B35
 ↑ ↑ ↑
 R G B  → Each channel 00-FF (0-255)

3-digit shorthand: #F63 equals #FF6633
4-digit shorthand with alpha: #F63A equals #FF6633AA
8-digit full with alpha: #FF6B3580 (80 = 50% opacity)

RGB and Alpha Channel

RGB directly maps to display primary colors:

rgb(255, 107, 53)          /* opaque */
rgba(255, 107, 53, 0.5)    /* 50% transparent */
rgb(255 107 53 / 50%)      /* modern syntax */

Alpha channel: 1 = fully opaque, 0 = fully transparent. Modern CSS prefers rgb() with space-separated values and / for transparency.

HSL: Intuitive Color Adjustment

HSL decomposes color into hue, saturation, and lightness:

Parameter	Range	Meaning
H (Hue)	0-360°	Color wheel angle: 0=red, 120=green, 240=blue
S (Saturation)	0-100%	0%=gray, 100%=pure color
L (Lightness)	0-100%	0%=black, 50%=pure color, 100%=white

Adjustment tips:

Same hue, different shades? Fix H and S, adjust L
Softer tone? Lower S
Complementary color? H ± 180°

OKLCH: The Perceptually Uniform Standard

OKLCH is a color space introduced in CSS Color Level 4, modeled on human perception:

Advantage	Description
Perceptually uniform	Brightness change from 0.5→0.6 looks the same as 0.7→0.8
Wider gamut	Supports P3 and other wide-gamut displays
Predictable adjustments	Fixed L with varying C/H keeps visual lightness constant

oklch(0.68 0.17 37)
       ↑    ↑   ↑
       L    C   H  → Lightness/Chroma/Hue

HSL's L=50% varies greatly in visual brightness across hues. OKLCH fixes this.

Using the Color Conversion Tool

Step 1: Open the Tool

Visit the Color Conversion tool and enter a color in any format.

Step 2: Select Input Format

Enter a color in the input box. Supported formats:

HEX: #FF6B35
RGB: 255, 107, 53
HSL: 16, 100%, 60%
OKLCH: 0.68, 0.17, 37

Step 3: View Conversion Results

The tool automatically displays all format conversions. Copy any result directly.

Step 4: Adjust Alpha Channel

Check "Include transparency" and enter an alpha value (0-1). Results will include the alpha channel.

CSS color-mix() in Practice

OKLCH combined with color-mix() enables precise color blending:

/* Mix in OKLCH space — perceptually uniform */
.button {
  background: color-mix(in oklch, #FF6B35, #3B82F6);
}

/* Mix 30% of accent color */
.card {
  border-color: color-mix(in oklch, #FF6B35 30%, white);
}

Use the Contrast Checker to verify that the mixed color meets contrast requirements with text.

Color Formats in Gradients

When using the Gradient Generator, OKLCH format is recommended:

/* OKLCH gradient transitions are more uniform */
background: linear-gradient(
  in oklch,
  oklch(0.7 0.15 30),
  oklch(0.7 0.15 250)
);

Traditional RGB/HSL gradients can produce dull midpoints around the color wheel. OKLCH avoids this.

Common Issues

Issue	Cause	Solution
HEX to RGB result wrong	Shorthand not expanded	Expand to 6-digit HEX first
HSL to HEX color shift	Floating-point precision loss	Use the tool for precise conversion
OKLCH not supported	Older browser	Use CSS fallback or PostCSS plugin
Alpha value display off	Mixed percentage and decimal	Use 0-1 decimal or 0%-100% consistently

Summary

Mastering HEX, RGB, HSL, and OKLCH formats and their conversions is a fundamental skill for front-end development and design. OKLCH's perceptual uniformity makes it the top choice for modern CSS. The Color Conversion tool handles all format conversions in one click, while the Contrast Checker and Gradient Generator complete your color workflow.