Menu

Post image 1
Post image 2
1 / 2
0

CSS Color Formats: Hex, RGB, HSL, and When to Use Each

DEV Community·Snappy Tools·about 1 month ago
#DHeYxAAQ
Reading 0:00
15s threshold

CSS supports more color formats than most developers use. Knowing when to reach for hex vs HSL vs oklch affects readability, maintainability, and how easily you can manipulate colors in code. Hex The most widely used format. A 6-digit hexadecimal value representing red, green, and blue channels: color : #3 b82f6 ; /* blue */ color : #ff0000 ; /* red */ color : #000000 ; /* black */ color : #ffffff ; /* white */ Enter fullscreen mode Exit fullscreen mode Each pair represents a channel from 00 (0) to ff (255). You can also use 3-digit shorthand when each pair is a repeated digit: color : #fff ; /* same as #ffffff */ color : #000 ; /* same as #000000 */ color : #f00 ; /* same as #ff0000 */ Enter fullscreen mode Exit fullscreen mode With alpha (transparency) : append two more hex digits (00–ff): color : #3 b82f680 ; /* 50% opacity blue */ color : #00000040 ; /* 25% opacity black */ Enter fullscreen mode Exit fullscreen mode When to use hex : copying from design tools (Figma, Sketch export hex), existing…

Continue reading — create a free account

Join HashtagPLUS to read full articles, follow hashtags, vote, and join the conversation.

Read More