CSS Color Generator
Generate CSS color values in every format — HEX, RGB, RGBA, HSL, HSLA and modern CSS. Enter any color and get production-ready CSS code instantly.
CSS Color Formats
Full CSS Declaration
What Is a CSS Color Generator?
A CSS color generator produces every valid CSS notation for a color at once. Whether you need classic HEX for compatibility, RGBA for transparency, HSL for design systems, or modern CSS syntax like oklch(), this tool gives you all the options with a single input.
All CSS Color Formats
- HEX:
#155EEF— 6-digit, universally supported - HEX 8-digit:
#155EEFCC— includes alpha (modern browsers) - RGB:
rgb(21, 94, 239)— the fundamental notation - RGBA:
rgba(21, 94, 239, 0.8)— RGB with alpha transparency - HSL:
hsl(215, 84%, 51%)— hue/saturation/lightness - HSLA:
hsla(215, 84%, 51%, 0.8)— HSL with alpha - Modern CSS:
hsl(215 84% 51% / 0.8)— space-separated syntax
Which Format Should I Use?
- Brand colors: HEX — universally recognizable, fits in design specs.
- Design systems: HSL — easy to derive tints and shades.
- Translucent overlays: RGBA or 8-digit HEX — alpha support.
- Modern CSS: Space-separated syntax — cleaner, future-proof.
- JavaScript animations: RGB — easier to interpolate numerically.