Color Converter: HEX ↔ RGB ↔ HSL ↔ HSV Instant Conversion
O
OIYO EditorialContributor
Color Converter
Figma uses HEX by default. CSS prefers RGB. Photoshop displays HSB (HSV). Converting color codes between tools is a constant chore — this converter handles it instantly.
Color Converter
HEX · RGB · HSL · HSV · CMYK
CSS Name:gray#6366F1
HEX
RGB
HSL
HSV
CMYK
RGB Sliders
R99
G102
B241
Recent Colors
No recent colors
Color Format Comparison
| Format | Example | Primary Use |
|---|---|---|
| HEX | #FF5733 | HTML, CSS, design tools |
| RGB | rgb(255, 87, 51) | CSS, web development |
| RGBA | rgba(255, 87, 51, 0.8) | CSS with transparency |
| HSL | hsl(11°, 100%, 60%) | CSS, hue-based adjustments |
| HSV/HSB | hsv(11°, 80%, 100%) | Adobe Photoshop & Illustrator |
| CMYK | C:0 M:66 Y:80 K:0 | Print color |
HEX shorthand: When each pair of digits in #RRGGBB is identical, you can shorten to 3 characters. E.g., #FFFFFF → #FFF, #336699 → #369.
Common Color Reference
| Color | HEX | RGB |
|---|---|---|
| Pure white | #FFFFFF | 255, 255, 255 |
| Pure black | #000000 | 0, 0, 0 |
| Red | #FF0000 | 255, 0, 0 |
| Green | #00FF00 | 0, 255, 0 |
| Blue | #0000FF | 0, 0, 255 |
| 50% gray | #808080 | 128, 128, 128 |
Understanding HSL
- H (Hue): 0–360°, Red (0°) → Green (120°) → Blue (240°) → Red (360°)
- S (Saturation): 0% (grayscale) → 100% (vivid)
- L (Lightness): 0% (black) → 50% (pure color) → 100% (white)
HSL is especially useful for making intuitive color adjustments in code.
Related Tools: Developer Utilities · UUID Generator
O
OIYO Editorial
Editorial DeskThe OIYO editorial desk researches money, law, lifestyle, and self-understanding topics against primary sources and public statistics. Every piece carries source notes and is reviewed on a regular cycle for accuracy and usefulness.