Color Code Converter Guide: HEX, RGB, HSL, and HSB for Web Developers

カラーコード変換の基礎 — Colors in web design are expressed in multiple formats, each with different strengths. Whether you're implementing a designer's Figma spec or trying to create harmonious color variations in CSS, understanding color formats is fundamental. This guide explains every major format and when to use each.

The Four Major Color Formats

All four formats describe the same color — the choice between them is about readability, tooling compatibility, and ease of manipulation.

HEX (Hexadecimal)

HEX is the most common format in web development. It encodes color as a 6-digit hexadecimal number prefixed with #:

• Format: #RRGGBB where RR, GG, BB are values 00–FF (0–255 in decimal)
• Example: #FF0000 = pure red, #000000 = black, #FFFFFF = white
• Shorthand: #RGB when pairs repeat — #FF6600 can be written as #F60
• With alpha: #RRGGBBAA — #3D5C2E80 is 50% transparent forest green

Best for: Copying from design tools, hardcoding brand colors, sharing color values with team members.

RGB (Red, Green, Blue)

RGB expresses color as three values from 0–255 for each channel:

• Format: rgb(red, green, blue) or rgba(red, green, blue, alpha)
• Example: rgb(255, 0, 0) = pure red
• Alpha (opacity): rgba(61, 92, 46, 0.5) = 50% transparent forest green

Best for: Dynamic color manipulation in JavaScript, transparency (alpha channel), and working with canvas or WebGL.

HSL (Hue, Saturation, Lightness)

HSL is the most intuitive format for designers and for programmatic color manipulation:

• Hue: 0–360 degrees on the color wheel (0=red, 120=green, 240=blue)
• Saturation: 0%=gray, 100%=fully saturated
• Lightness: 0%=black, 50%=normal, 100%=white

Format: hsl(97, 33%, 27%)

Why HSL is powerful: Creating color variations is intuitive. To make a lighter version of a color, just increase the lightness. To make a muted version, decrease the saturation. This is much harder to reason about in HEX or RGB.

Best for: CSS theming, generating color palettes programmatically, dark mode implementations.

HSB / HSV (Hue, Saturation, Brightness/Value)

HSB (also called HSV) is similar to HSL but uses Brightness instead of Lightness. The key difference: in HSL, 100% lightness is always white; in HSB, 100% brightness at 100% saturation is the pure hue.

Design tools like Adobe Photoshop, Illustrator, and Sketch use HSB internally for their color pickers. Figma uses HSL for CSS export but HSB in the color picker UI.

Best for: Working with design software color pickers, selecting visually appealing saturated colors.

When to Use Each Format

Format	Use When
HEX	Copying from Figma/Zeplin specs, brand color constants in CSS variables
RGB / RGBA	JavaScript color manipulation, canvas drawing, transparency needed
HSL / HSLA	CSS theming systems, generating tint/shade scales, dark mode tokens
HSB	Inputting colors in design tool pickers (Photoshop, Illustrator)

Color Accessibility: Contrast Ratios

Converting between color formats also helps with accessibility. WCAG 2.1 requires:

• 4.5:1 contrast ratio for normal text (AA compliance)
• 3:1 contrast ratio for large text (18pt+ or 14pt bold)
• 7:1 contrast ratio for enhanced (AAA) compliance

When choosing text and background colors, always check the contrast ratio. Tools that support contrast checking require color values in any standard format.

Summary

Use HEX for copying design specs, RGB when you need alpha transparency in JavaScript, and HSL for CSS theming systems where you need to programmatically generate color variations. HSB is mainly useful when working with design tool pickers. Having a reliable color converter removes the friction of switching between formats as you move between design and development environments.