Color Converter

Convert between all major color formats: HEX, RGB, RGBA, HSL, HSLA, HSV, and CMYK. Automatically generates 9 shades and 9 tints. Outputs CSS custom property and Tailwind arbitrary value syntax. Includes an 18-color named palette for quick selection.

Color Formats

HEX: #RRGGBB or #RGB format. RGB: rgb(r, g, b) with values 0-255. RGBA: rgb(r, g, b, a) with alpha 0-1. HSL: hsl(h, s%, l%) with hue 0-360, saturation/lightness 0-100%. HSLA: hsla(h, s%, l%, a) with alpha. HSV/HSB: Hue, Saturation, Value — intuitive for color picking. CMYK: Cyan, Magenta, Yellow, Black — for print design.

Shades and Tints

Shades: Darker variations created by adding black to the base color. 9 shades from 10% to 90% darkness. Tints: Lighter variations created by adding white to the base color. 9 tints from 10% to 90% lightness. Perfect for creating color palettes and UI themes.

CSS Output

HEX format for simple colors. RGB for opacity support. HSL for intuitive adjustments. CSS custom property: --color-primary: #ff5733;. Tailwind arbitrary value: text-[#ff5733] or bg-[rgb(255,87,51)].

Named Colors Palette

18 common CSS named colors: Red, Orange, Yellow, Green, Blue, Indigo, Violet, Purple, Pink, Brown, Black, Gray, White, Cyan, Teal, Lime, Olive, Maroon. Click any to load and convert.

Use Cases

Web development: Convert design colors to CSS formats. Print design: Convert RGB to CMYK for printing. UI design: Generate shades and tints for themes. Data visualization: Convert between formats for chart libraries.