CalcOpenly
Türkçe

Color palette generator (complementary, triadic, analogous)

Generate complementary, analogous, triadic, split-complementary, tetradic or monochromatic color palettes from one base color, with HEX codes.

Güncellendi Doğrulanan örnekler: 6

#RRGGBB, a CSS name, rgb(), hsl() or oklch().
Dene
Palette
#2E86C1, #C12E86, #86C12E
Palette: #2E86C1, #C12E86, #86C12E
Hues
204.1°, 324.1°, 84.1°
Colors
3

A triadic palette from #2E86C1: #2E86C1, #C12E86, #86C12E. The hues sit at 204.1°, 324.1°, 84.1° on the HSL wheel with saturation and lightness unchanged.

Triadic palette

#2E86C1
Base
#C12E86
+120°
#86C12E
+240°

Positions on the hue wheel

#2E86C1#C12E86#86C12E
Nasıl hesaplanır S

  1. Base color in HSL

    #2E86C1=hsl(204.1, 61.5%, 46.9%)\text{\#2E86C1} = \text{hsl(204.1, 61.5\%, 46.9\%)}

  2. Build the triadic set

    Each color keeps the base saturation 61.5% and lightness 46.9% and turns the hue by +120°, +240°.

  3. Convert back to HEX

    Base: hsl(204.1, 61.5%, 46.9%) → #2E86C1; +120°: hsl(324.1, 61.5%, 46.9%) → #C12E86; +240°: hsl(84.1, 61.5%, 46.9%) → #86C12E

    Channels are rounded half up to whole 8-bit values.

Color palette generator (complementary, triadic, analogous) hakkında

Each harmony scheme turns the base color's hue around the HSL color wheel by fixed angles and keeps its saturation and lightness: 180° for complementary, ±30° for analogous, 120° and 240° for triadic, 180° ± 30° for split-complementary and 90° steps for a tetradic square. The monochromatic scheme keeps the hue and mixes the base toward black for shades and toward white for tints, in equal steps.

Designers use it to find accent colors for a brand, chart or interface. The default, #2E86C1 at hue 204.1°, gives the triadic set #2E86C1, #C12E86 and #86C12E, and its complement is #C1692E at hue 24.1°.

Equal HSL lightness does not mean equal brightness to the eye: in that triad, #86C12E has a relative luminance of 0.434 against 0.150 for #C12E86. Check text and background pairs with a contrast checker before using them.

Çözümlü örnekler

Complement of red

Base color
#FF0000
Scheme
Complementary (opposite hue)
Palette
#FF0000, #00FFFF
Colors
2

Doğrulama kaynağı: Python 3.8 colorsys and an exact fractions version of CSS Color 4 hslToRgb: hue 0° + 180° → (0, 1, 1)

Triadic from red

Base color
red
Scheme
Triadic (3 hues, 120° apart)
Palette
#FF0000, #00FF00, #0000FF
Hues
0°, 120°, 240°

Doğrulama kaynağı: Python 3.8 colorsys and an exact fractions version of CSS Color 4 hslToRgb: hue rotations by 120° and 240°

Analogous from #2E86C1

Base color
#2E86C1
Scheme
Analogous (neighboring hues)
Spread
30 °
Palette
#2EC1B3, #2E86C1, #2E3DC1

Doğrulama kaynağı: Python 3.8 fractions implementation of CSS Color 4 rgbToHsl/hslToRgb: hue 204.1° ± 30° gives (46, 193, 178.5) and (46, 60.5, 193), rounded half up

Tetradic square from red

Base color
#FF0000
Scheme
Tetradic square (4 hues, 90° apart)
Palette
#FF0000, #80FF00, #00FFFF, #8000FF

Doğrulama kaynağı: Python 3.8 fractions implementation of CSS Color 4 hslToRgb: hues 90° and 270° give a channel of exactly 127.5, rounded half up to 0x80 (float colorsys lands at 127.4999…)

Sorular

How do I find the complementary color of a hex code?

Convert the color to HSL, add 180° to the hue, and convert back with the same saturation and lightness. #2E86C1 has hue 204.1°, so its complement has hue 24.1°, which is #C1692E. On this RGB-based wheel the complement of red #FF0000 is cyan #00FFFF; on the painter's red-yellow-blue wheel red pairs with green instead, so results differ between tools.

What is the difference between triadic and split-complementary colors?

A triadic scheme uses three hues spaced evenly, 120° apart. A split-complementary scheme keeps the base and replaces its complement with the two hues on either side of it, 150° and 210° from the base when the spread is 30°. From #2E86C1 the triad is #C12E86 and #86C12E, while the split-complementary pair is #C12E3D and #C1B32E, which spreads the hues wider than an analogous set.

What is the difference between a tint, a shade and a tone?

A tint is a color mixed with white, a shade is mixed with black, and a tone is mixed with gray. This generator makes tints and shades in equal steps: with 2 steps each, the gray #808080 gives shades #2B2B2B and #555555 and tints #AAAAAA and #D5D5D5. Mixing is done channel by channel in sRGB, so each step changes all three channels by the same fraction.

Why don't the colors in my palette look equally bright?

HSL lightness is a formula on the RGB channels, not a measure of perceived brightness, and the eye is far more sensitive to green than to blue. The triad from #2E86C1 has equal HSL lightness, but relative luminances of 0.215, 0.150 and 0.434. For steps that look even, set lightness in OKLCH instead, which CSS Color Level 4 supports.

Can I use palette colors for text?

Only after checking contrast. WCAG 2.2 asks for at least 4.5:1 between normal text and its background, and 3:1 for large text and interface parts. On white, #C12E86 reaches 5.25:1 and passes, #2E86C1 reaches 3.97:1 and suits only large text, and #86C12E reaches 2.17:1 and fails, so use it for fills and borders rather than text.

“Color palette generator (complementary, triadic, analogous)” ne kadar doğru sonuç verir?

Doğruluk, girdilerinize ve yöntemin varsayımlarına bağlıdır. Ondalık aritmetik 50 anlamlı basamak kullanır; ancak tahminler, sayısal yöntemler ve kaynak veriler daha az hassas olabilir. Gösterilen değerin yuvarlanması bu sınırları ortadan kaldırmaz. Bağımsız kaynaklarla doğrulanan çözümlü örnek sayısı: 6. Örneğin “Complement of red”, Python 3.8 colorsys and an exact fractions version of CSS Color 4 hslToRgb: hue 0° + 180° → (0, 1, 1) ile karşılaştırılarak doğrulanır.

Yöntemin kaynağı nedir?

W3C CSS Color Module Level 4 §7 — HSL and the hslToRgb / rgbToHsl algorithms; Johannes Itten, The Art of Color (1961) — color contrasts and harmonic chords.

Bu hesaplayıcı hakkında

Hk=(H0+Δk) mod 360∘Sk=S0,Lk=L0tintt=C+t (1−C)shadet=C (1−t)\begin{aligned} H_k &= (H_0 + \Delta_k) \bmod 360^\circ \\ S_k &= S_0,\quad L_k = L_0 \\ \text{tint}_t &= C + t\,(1 - C) \\ \text{shade}_t &= C\,(1 - t) \end{aligned}

Kaynaklar

  1. W3C CSS Color Module Level 4 §7 — HSL and the hslToRgb / rgbToHsl algorithms
  2. Johannes Itten, The Art of Color (1961) — color contrasts and harmonic chords

Kaynaklarla doğrulandı

Bu hesaplayıcı, yanıtları bağımsız kaynaklardan alınan 6 çözümlü örnek içerir. Bunlar test paketinde çalıştırılır; burada da çalıştırabilirsiniz.

İlgili hesaplayıcılar