⚙️ DevCSS

Online Color Palette Generator

The palette is built using color wheel rules in the HSL color space. All combinations are mathematically harmonious — ready to use in CSS, Figma, or any other design tool.

Base color

Palette type

Shades of one color — for backgrounds, text, accents

#0c0a43

#17127d

#231bbb

#5048e5

#9d98f0

#e1e0fb

:root {
  --color-1: #0c0a43;
  --color-2: #17127d;
  --color-3: #231bbb;
  --color-4: #5048e5;
  --color-5: #9d98f0;
  --color-6: #e1e0fb;
}

Frequently asked questions

What are complementary colors?

Complementary (opposite) colors sit directly across from each other on the color wheel — they create maximum contrast and visual tension. Examples: blue + orange, red + green. Use them for accents and CTA buttons.

How do I choose between analogous and triadic palettes?

Analogous palettes — neighboring colors on the wheel — produce a soft, calm combination. Triadic palettes — three equally spaced colors — deliver a vibrant, balanced result. Use analogous for backgrounds and body text, triadic for accents.

How do I apply the palette in CSS?

Copy the HEX codes you need and use them as color values in CSS: `color: #4f46e5`, `background: #e0e7ff`. For easy reuse, define them as CSS custom properties: `--primary: #4f46e5; --primary-light: #e0e7ff`.

Related tools

Dev

CSS Gradient

Create linear and radial CSS gradients visually and copy the ready-to-use code.

Dev

Colour Contrast Checker

Enter your text and background colors to get the contrast ratio and WCAG 2.1 compliance status (AA and AAA) for normal and large text.

Dev

CSS Box Shadow

Configure shadows visually — sliders for offset, blur, color, and opacity. Supports multiple shadow layers and comes with presets for popular styles.

Need a full SEO audit?

Tools help with targeted tasks. For systematic growth — request a free review of your site.