Color palette generator (complementary, triadic, analogous)

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.

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.

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.

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.

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.

Akurasi bergantung pada masukan dan asumsi metode. Aritmetika desimal memakai 50 digit signifikan, tetapi perkiraan, metode numerik dan data sumber bisa kurang presisi; pembulatan yang ditampilkan tidak menghilangkan batasan itu. Contoh penyelesaian yang diperiksa dengan sumber independen: 6. Misalnya, “Complement of red” diperiksa dengan Python 3.8 colorsys and an exact fractions version of CSS Color 4 hslToRgb: hue 0° + 180° → (0, 1, 1).

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.