Bahasa Melayu
Halaman ini ada dalam Bahasa Melayu
Seluruh halaman — arahan, butang dan keputusan.
Tukar ke Bahasa MelayuBahasa Indonesia
Halaman ini tersedia dalam Bahasa Indonesia
Seluruh halaman — petunjuk, tombol, dan hasil.
Beralih ke Bahasa IndonesiaGenerate harmonious five-colour palettes in one tap — random, complementary, analogous, triadic or monochromatic. Lock the colours you like and reshuffle the rest, click to copy any HEX code, and export a beautiful palette card. Browser-only, instant.
Color Palette Generator
Contrast check (WCAG 2.2)
| Colour | HEX | rgb() | hsl() | On white | On black |
|---|---|---|---|---|---|
Every pair, strongest contrast first
- Aa
- Aa
- Aa
- Aa
- Aa
- Aa
- Aa
- Aa
- Aa
- Aa
Figures are WCAG 2.2 contrast ratios, rounded down, so a pair shown at 4.5:1 really reaches 4.5:1. Body text needs 4.5:1 (AA) or 7:1 (AAA); large text (18pt, or 14pt bold) needs 3:1. A harmony rule decides how hues relate, not contrast: two colours opposite on the wheel can have almost the same luminance.
How to use
Choose a palette mode
Pick from Random, Complementary, Analogous, Triadic or Monochromatic. Each is a colour-harmony rule that decides how the five colours relate to one another.
Hit Generate, or press Space
Each press produces a fresh harmonious palette. Don’t like it? Press again, or just tap the spacebar to reshuffle quickly.
Lock and copy
Found a colour you love? Tap its 🔓 to lock it so it stays put on the next generate. Click any HEX value to copy it (e.g. #E8622A) straight into your design.
Download or share the card
Tap “Download palette” to save the whole set as an image (with HEX codes), “Share” to send it to a teammate, or export a PDF.
Colour Palette Generator: good colours in seconds, by colour theory
Picking colours is often the part of a design where people get stuck: one colour looks fine on its own, but five thrown together just clash. This generator turns the rules behind colour harmony into a single button — it doesn’t hand you five random colours, it builds a set that is naturally coordinated by the geometry of the colour wheel. You just pick, lock and copy the ones you love straight into your design.
Five modes, five relationships
The tool offers the most-used harmony rules, each a relationship on the colour wheel: Monochromatic — one hue, varied only in lightness, the safest and most timeless; Analogous — neighbouring hues on the wheel, soft and natural, like the colours of one landscape; Complementary — two hues directly opposite, high-contrast and eye-catching; Triadic — three evenly-spaced hues, vivid yet balanced; and Random — hues let loose while keeping a clear range of lightness, for happy accidents. Switch the mode and the whole relationship changes with it.
“A good palette isn’t thrown together — it’s arranged by relationship.”
What HEX is, and why it’s everywhere
The string under each colour, like #E8622A, is its HEX code — the universal “ID card” for colour across the web, design software and almost every digital tool. It’s a # followed by six hexadecimal digits, encoding the strength of the red, green and blue channels. Click one to copy it, then paste into CSS, Figma or your slides and the colour matches exactly. Every colour this tool generates comes with its HEX, ready to use.
A quick word on contrast
Beyond looking good, a palette has to work: text needs enough contrast against its background to stay readable (the WCAG accessibility standard suggests at least 4.5:1 for body text). The HEX labels on the card automatically switch between black and white depending on how light or dark each swatch is, so they stay legible — a handy reminder to check contrast whenever you use these colours for text and background. The whole tool runs locally in your browser, instantly, uploading nothing.
Newton’s seven-part colour circle, HEX’s 16.7 million, and why HSL lightness misleads
A HEX code encodes red, green and blue in hexadecimal, each channel 00–FF (0–255) — about 16.7 million colours in theory.
Newton’s Opticks (first published 1704; Book I, Part II, Prop. VI) draws a circle split into seven colours, red to violet, with each arc sized to an interval of a musical scale — the ancestor of the hue wheel this tool rotates.
Human eyes are most sensitive to green, which is why luminance formulas weight green highest (about 0.72), far above red (0.21) and blue (0.07).
The WCAG accessibility standard asks for at least 4.5:1 contrast between body text and background (3:1 for large text), to serve low-vision users.
Screens use RGB (additive light) and printing uses CMYK (subtractive ink); the same HEX can look slightly different on screen versus on paper.
This tool works in HSL because a harmony is a rotation of the hue angle. But HSL lightness is not what the eye sees: CSS Color 4 points out that yellow hsl(60 100% 50%) and blue hsl(240 100% 50%) share 50% lightness, yet their WCAG luminances are 0.93 and 0.07 — which is why the contrast check above measures every pair.
Frequently Asked Questions
-
Each swatch shows a HEX code (e.g. #E8622A). Click to copy it, then paste into CSS, Figma, Photoshop, slides or anywhere that accepts HEX — the colour matches exactly. You can also download the palette card for reference.
-
Each maps to a geometry on the colour wheel: Monochromatic = one hue, varied lightness (safest); Analogous = neighbouring hues (soft); Complementary = opposite hues (high contrast); Triadic = three evenly-spaced hues (vivid, balanced); Random = hues let loose but with a clear lightness range. Switch and the whole relationship changes.
-
Tap the 🔓 on a colour to lock it; the next time you press Generate, locked colours stay put and only the unlocked ones change. That lets you keep a colour or two you love and reshuffle the rest until the whole set works.
-
Unless you set a base colour, yes — each Generate draws a random base hue, saturation and lightness, then builds the other four colours from it by the mode’s fixed rule (the rule is shown under the controls). With “Start from this colour” ticked, your colour is kept exactly and only the Random mode still draws anything at random.
-
Not automatically, and a harmony mode does not make it so: two complementary hues can have almost the same luminance, and luminance is what contrast depends on. What the tool does is measure. The contrast check lists all ten pairs with their WCAG 2.2 ratio — 4.5:1 is the AA bar for body text, 3:1 for large text — and each swatch label uses black or white, whichever is higher, which always clears 4.5:1. It does not simulate colour-vision deficiency.
-
Yes. Pick a colour in “Base colour” (or tick “Start from this colour”) and every mode builds around it; your colour is kept exactly, in the slot the rule gives the base. You can also lock any swatch with 🔒 and reshuffle the rest.
-
A high-resolution JPEG showing the five swatches with their HEX values, good for sharing or archiving; a PDF is available too. The whole image is generated on your device, never via a server.
-
They’re different notations for the same colour. RGB uses three 0–255 numbers for red, green, blue; HEX is RGB written in hexadecimal (#RRGGBB); HSL describes it by hue, saturation and lightness, closer to human intuition. This tool derives harmonies in HSL and outputs the universal HEX.
-
No. Every palette is generated on the spot in your browser — never uploaded, written to the URL, or collected. Refresh the page and it starts over.
Method & sources
How it computes
Five colours from fixed HSL hue rotations of a base (complementary +180°, triadic ±120°, analogous 20° steps, monochromatic lightness ladder); HSL to sRGB by the CSS Color 4 §7.1 algorithm. Every pair's WCAG 2.2 contrast ratio, (L1 + 0.05) / (L2 + 0.05), shown rounded down; swatch labels use black or white, whichever contrasts more (ColourPaletteKernel).
What this tool implements
- Colour conversion: HSL to sRGB and back by the W3C CSS Color Module Level 4 sample algorithms (§7.1 hslToRgb, §7.2 rgbToHsl), through the site's shared ColourConvertKernel; HEX as #RRGGBB.
- Contrast: WCAG 2.2 relative luminance (sRGB linearised at 0.04045; L = 0.2126 R + 0.7152 G + 0.0722 B) and contrast ratio (L1 + 0.05) / (L2 + 0.05). Bands: 7:1 AAA and 4.5:1 AA for body text (SC 1.4.6, SC 1.4.3), 3:1 for large text (18 point, or 14 point bold). Ratios print rounded DOWN to one decimal, so a figure shown as 4.5:1 is never a 4.46 that fails.
- Harmony rules are this tool's own, stated on the page in degrees and percent: analogous −40° to +40° in 20° steps; complementary three of the base hue and two at +180°; triadic +120° and +240° plus a tint and a shade; monochromatic lightness 88/72/56/40/26%; random five hues over a random 40–160° arc. A base colour the reader enters is kept exactly.
- HSL lightness is not perceived lightness (CSS Color 4 §7: yellow and blue at 50% have WCAG luminance 0.93 and 0.07), so no harmony is presented as accessible; every pair is measured instead.
- Corrected 2026-11-03: label ink by luminance < 0.45 (32.5% of 500,000 generated swatches under 4.5:1, worst 2.10:1) replaced by the higher-contrast of black and white (floor 4.58:1); Newton's colour circle dated 1666 corrected to Opticks, 1704.
Sources
- W3C. CSS Color Module Level 4, Candidate Recommendation Draft, 1 November 2026 — §7.1 and §7.2 sample code, and the §7 note on HSL lightness across hues: https://www.w3.org/TR/css-color-4/
- W3C. Web Content Accessibility Guidelines (WCAG) 2.2 — definitions of relative luminance, contrast ratio and large-scale text; SC 1.4.3 and SC 1.4.6: https://www.w3.org/TR/WCAG22/
- Newton I. Opticks. 4th ed. London: William Innys; 1730 (first edition 1704). Book I, Part II, Prop. VI, the seven-part colour circle. Project Gutenberg: https://www.gutenberg.org/ebooks/33504
What can make this go out of date
- None at runtime: palettes and contrast are computed in the browser and nothing the reader picks is sent or written to the URL.
Pick up where you left off
Stored only in this browser — never sent to our servers.