DevConvertor

Color Palette Generator

Generate a 5-color palette from a base color using well-defined relationships — monochromatic, analogous, complementary, triadic, shades, or tints — not arbitrary randomness. Lock individual colors, then regenerate the rest, and export as HEX or CSS custom properties.

Base color

Hues next to each other on the color wheel

#3DB0A2
7.9:1 text contrast
#3D85B0
5.2:1 text contrast
#3D4BB0
7.4:1 text contrast
#683DB0
7.3:1 text contrast
#A23DB0
5.5:1 text contrast

ReadyColor ToolsFree · No account required

Related tools

Color PickerPick a color and convert it between HEX, RGB, HSL, and OKLCH.Gradient GeneratorBuild linear, radial, and conic CSS gradients visually.

Features

  • Seven modes: random, monochromatic, analogous, complementary, triadic, shades, tints
  • Deterministic color relationships in HSL space, not arbitrary randomness
  • Lock individual swatches, then regenerate the rest
  • Copy an individual color, the whole palette, or CSS custom properties
  • A contrast-ratio note under each swatch

How to use

  1. Pick a base color.
  2. Choose a generation mode.
  3. Click Generate for a new variation, or lock swatches you want to keep first.
  4. Copy individual colors or the whole palette.

FAQ

What do the different modes mean?
Each mode is a defined relationship in HSL color space, not random guessing: monochromatic varies the lightness and saturation of one hue; analogous picks hues next to each other on the color wheel; complementary uses a hue and its direct opposite; triadic uses three hues evenly spaced 120° apart; shades mixes toward black; tints mixes toward white. Random is the only mode without a fixed relationship.
What does locking a color do?
A locked swatch keeps its exact color when you click Generate again — only the unlocked swatches are recomputed. This lets you build a palette around one color you've settled on.
Does the contrast note under each swatch mean it's accessible?
It shows the contrast ratio between that swatch and whichever of black or white text reads better on it, plus whether that pairing meets WCAG AA for normal text (4.5:1) or not. It's a starting signal, not a guarantee that the palette as a whole is accessible in every context you might use it.