Color Converter - HEX, RGB, HSL & OKLCH
Convert colors between HEX, RGB, HSL, and OKLCH formats. Generate complementary, analogous, and triadic palettes. Export as CSS variables or Tailwind config.
hex
#6b21a8
rgb
rgb(107, 33, 168)
hsl
hsl(273, 67%, 39%)
cssVar
--color-custom: #6b21a8;
complementary
analogous
triadic
split Complementary
shades
tints
:root {
--color-primary: #6b21a8;
--color-complementary-1: #6a21a6;
--color-complementary-2: #5da621;
--color-analogous-1: #2721a6;
--color-analogous-2: #6a21a6;
--color-analogous-3: #a6219f;
}Color Format Reference
- HEX - A six-digit hexadecimal color code prefixed with #. The most common format in web design (e.g. #6B21A8).
- RGB - Defines a color by its Red, Green, and Blue channels, each ranging from 0 to 255.
- HSL - Stands for Hue, Saturation, and Lightness. More intuitive for creating color palettes and adjusting tones.
Color Harmony Types
- Complementary - Two colors opposite each other on the color wheel. Creates strong visual contrast.
- Analogous - Three colors next to each other on the wheel. Produces harmonious, cohesive palettes. Use our analogous color palette generator above to create one instantly.
- Triadic - Three colors equally spaced around the wheel. Balanced and vibrant.
- Split-Complementary - A base color plus the two colors adjacent to its complement. High contrast with less tension.
Related Free Tools
- Color Info & Lookup - Get detailed info for any color including contrast ratios, named colors, and OKLCH values.
- WCAG Contrast Checker - Test your palette colors against WCAG accessibility standards.
- CSS Gradient Generator - Use your palette colors to build CSS gradients visually.
- Color Palette Feature - Extract complete color palettes from any live website with the MiroMiro extension.
Extract color palettes from any website
MiroMiro's Chrome extension extracts complete color palettes from any live website - including HEX, RGB, and HSL values for every color used.