bringer.ru
ruen

Colour · palettesColour palette generator

Enter one colour and get a harmonious five-colour palette, a 50–900 tint ramp and a text readability check. Export to CSS, SCSS, Tailwind and JSON.

Everything is computed in your browser — colours never leave the device
01Colour and scheme02Palette03Ramp04Preview05Export06About harmony07Questions08Related
01

Base colour and scheme

the palette rebuilds on every keystroke
Input · base colour
Ready-made bases
Harmony scheme
Result · palette
Base colour#e4002b
hsl(349 100% 45%)
rgb(228 0 43)
Palette accessibility5 of 5 take text
colours where normal text clears the 4.5:1 threshold
02

Palette

five colours, the first one is the base
hsl(349 100% 45%)
white text
4.85 : 1
hsl(319 90% 57%)
dark text
5.20 : 1
hsl(334 100% 45%)
white text
4.68 : 1
hsl(4 100% 45%)
white text
4.81 : 1
hsl(19 90% 33%)
white text
6.99 : 1
03

Tint ramp

ten steps of a single hue

The saturation of the base colour on every step — a ramp for the primary interface colour.

04

Live preview

the palette on an interface block
Project panelOverview · Tasks · Reports

Weekly summary

CreateConfigure

This text is set in step 700 on a step 50 surface — the very pair that goes into the export.

Conversion
4.8%
Tasks
128
Errors
3
Colour roles
Primary
the main action button
#e4002b
Light pair
surfaces and fills
#ffd1da
Dark
the header and headings
#9e3708
Accent
figures and highlights
#e40e00
Borders
frames and dividers
#ffa8b9
05

Export

the same values as shown above
:root {
  --color-base: #e4002b;
  --color-a: #f42db6;
  --color-b: #e40064;
  --color-c: #e40e00;
  --color-d: #9e3708;

  --color-base-50: #ffebee;
  --color-base-100: #ffd1da;
  --color-base-200: #ffa8b9;
  --color-base-300: #ff708b;
  --color-base-400: #ff385e;
  --color-base-500: #ff0534;
  --color-base-600: #d60028;
  --color-base-700: #ad0021;
  --color-base-800: #800018;
  --color-base-900: #52000f;
}
The code is assembled in your browser: neither the colour nor the palette is sent to a server.
06

About colour harmony

Harmony is the rule by which the colours were picked: neighbouring hues, opposite ones, equal slices of the wheel. The rule alone does not make a palette work — the colours still have to differ in lightness and to carry text. That is why every colour here comes with its contrast.

The colour wheel

Basics
0° … 360°
Hue (H) is a position on the wheel: 0° red, 120° green, 240° blue. Every harmony scheme is a rule for picking points on that wheel; saturation and lightness are handled separately.

Analogous scheme

Scheme
±15° · ±30°
Neighbouring hues. The set comes out calm and uniform — right when colour should not compete with the content: sites, documentation, long-form text.

Complementary

Scheme
+180°
The opposite hue on the wheel. Maximum colour contrast: a primary plus an accent impossible to miss. Do not set text in two such colours — use the second one to highlight.

Triad and tetrad

Scheme
+120° · +90°
The wheel is split into three or four equal parts. The set is vivid and balanced but harder to govern: the more equal colours there are, the harder it is to build a hierarchy.

The tint ramp

Steps
50 … 900
One hue at fixed lightness steps: 50 a near-white surface, 900 a near-black text colour. Such a ramp is the design-system convention, which makes it easy to move into code unchanged.

Contrast beats harmony

Accessibility
4.5:1
Harmony says nothing about readability. Text on a colour is judged by luminance: the WCAG threshold for normal text is 4.5:1. A beautiful palette you cannot write on is an unfinished palette.
07

Frequently asked questions

A set of colours tied together by a single rule — usually their position on the colour wheel. The eye reads such a set as a whole rather than as a random scatter. Every scheme here is built from one base colour by shifting hue, saturation and lightness according to the formula of the chosen scheme.
WCAG

Contrast checker

The same formulas: check a pair of colours against AA and AAA
HEX

Color converter

HEX, RGB, HSL and 140 named colors
QR

QR Code Generator

Custom code colours with a scannability check
16

Numeral systems

HEX ↔ DEC — read a colour channel by channel
«» added to favorites