कलर फॉर्मेट समझाए गए: HEX, RGB, और HSL
Quick Answer
HEX (#RRGGBB) और RGB (प्रति चैनल 0–255) लाल, हरा, नीला तीव्रता सीधे एन्कोड करते हैं। HSL (hue 0–360°, saturation/lightness 0–100%) मानव धारणा से मेल खाता है। हमारे Color Converter से तीनों के बीच बदलें।
Introduction
वेब कलर तीन प्रमुख फॉर्मेट में निर्दिष्ट होते हैं: HEX (base-16 लाल, हरा, नीला), RGB (प्रति चैनल 0–255) और HSL (hue, saturation, lightness)। तीनों एक ही sRGB कलर स्पेस का वर्णन करते हैं लेकिन अलग-अलग अक्ष खोलते हैं: HEX और RGB हार्डवेयर-उन्मुख हैं, HSL मानव-उन्मुख है। आधुनिक CSS alpha को HEX8, rgba() और hsla() से समर्थन करता है।
Step by Step
-
Understand HEX notation
HEX writes each channel as a two-digit base-16 number: #RRGGBB. 00 is off, FF (255) is full intensity. #FF0000 is pure red, #00FF00 pure green, #0000FF pure blue, #FFFFFF white, #000000 black. A 4-digit shorthand #RGB expands to #RRGGBB, and #RRGGBBAA adds alpha (e.g. #FF573380 is 50% alpha).
-
Understand RGB notation
RGB uses decimal 0—55 per channel: rgb(255, 87, 51) is the same as #FF5733. The rgba() function adds a 0— alpha: rgba(255, 87, 51, 0.5) is 50% opaque. RGB is equivalent to HEX —it is just decimal instead of base-16.
-
Understand HSL notation
HSL uses hue (0—60° on the color wheel: 0=red, 120=green, 240=blue), saturation (0% = gray, 100% = full color), and lightness (0% = black, 50% = normal, 100% = white). hsl(11, 100%, 60%) is a vivid orange. HSL makes it trivial to build tints (raise lightness) and shades (lower lightness) of the same hue.
-
Convert between formats
HEX→RGB: parse each pair as base-16. RGB→HEX: convert each channel to 2-digit base-16. RGB→HSL: compute max/min of normalized channels, lightness = (max+min)/2, saturation depends on lightness, hue is the angle of the dominant channel. Use our Color Converter to do all of this instantly.
-
Choose the right format for the task
Use HEX for compactness in design tokens and assets. Use RGB/rgba() when you need to interpolate or animate channels. Use HSL/HSLA when generating palettes, shades, or theme variations —adjusting lightness by 10% is far easier than reasoning about RGB deltas.
Examples
Pure red in all three formats
Input: #FF0000
Output: rgb(255, 0, 0) = hsl(0, 100%, 50%)
A vivid orange
Input: #FF5733
Output: rgb(255, 87, 51) = hsl(11, 100%, 60%)
White and black
Input: #FFFFFF and #000000
Output: rgb(255,255,255) = hsl(0, 0%, 100%); rgb(0,0,0) = hsl(0, 0%, 0%)
Building a 5-step shade from one HSL hue
Input: hsl(210, 70%, 50%) —vary lightness 30/40/50/60/70%
Output: #1A4D7F, #2E6BA3, #4389C7, #6FA8DC, #9EC5E8 —a coherent blue palette
Common Problems
- Mixing 3-digit and 6-digit HEX: #F00 and #FF0000 are the same color, but some parsers only accept one form. Normalize to 6-digit in code to avoid surprises.
- Forgetting that HSL lightness 50% is not 'half brightness': at 100% saturation, 50% lightness is the pure hue; above 50% it tints toward white, below 50% it shades toward black. '50% gray' is hsl(0, 0%, 50%).
- Alpha channel confusion: #RRGGBBAA (HEX8) is supported in modern browsers but not in older ones; rgba()/hsla() has wider support. Always test the target environment.
- Color-space mismatch: HEX, RGB, and HSL all describe sRGB. If you convert to/from P3 or Lab/OKLCH (used by modern displays), a naive channel copy produces wrong colors —use a proper color library.
Tips
- Use HSL when designing a palette: pick one hue, then vary lightness (e.g. 30/50/70%) and saturation (e.g. 60/80/100%) to generate coherent shades and tints.
- For accessibility, check contrast ratio against the background —WCAG AA requires 4.5:1 for normal text, AAA 7:1. Use our Color Converter to compute relative luminance and contrast.
- Prefer modern CSS color-mix() or oklch() for perceptually uniform interpolation —RGB interpolation can pass through muddy grays when mixing complementary colors.
- When generating gradients, convert endpoints to the same format first —mixing HEX and HSL in a single gradient declaration can produce unexpected midpoints.