RGB Color Chart & Harmonic Palette Generator (Complementary, Triadic

Color Wheel Harmonies, Itten Theory & Mathematical Color Schemes

Color harmony mathematically arranges hues across the 360-degree cylindrical color wheel:

• **

• Core Color Harmony Formulas (in HSL Hue Degrees H)**:

• Complementary (Maximum Contrast):

H_comp = 360^

• Triadic (Balanced High Energy):

H_tri1 = 360^, H_tri2 = 360^

• Analogous (Serene & Cohesive):

H_ana1 = (H - 30^) 360^, H_ana2 = 360^

• Split-Complementary (Nuanced Contrast):

H_split1 = 360^, H_split2 = 360^

• **

• Monochromatic Tints & Shades**:

• Tint (Lighter): L_tint =

• Shade (Darker): L_shade = (0.0, L - 0.20)

How to Use This Calculator

Enter your Red Channel (R: 0 to 255) (e.g. 37 in R), Green Channel (G: 0 to 255) (e.g. 99 in G), Blue Channel (B: 0 to 255) (e.g. 235 in B), and Base Color Harmony Benchmark — choose from Custom RGB Color, Royal Blue (#2563EB / RGB 37, 99, 235), Coral Orange (#F97316 / RGB 249, 115, 22). Results update instantly as you type — adjust any value to compare scenarios.

The Formula

Formula Reference: RGB Color Chart & Harmonic Palette Generator (Complementary, Triadic)

Input variables:

redChannelInput — Red Channel (R: 0 to 255)

greenChannelInput — Green Channel (G: 0 to 255)

blueChannelInput — Blue Channel (B: 0 to 255)

Computed outputs:

complementaryColorFormatted — Complementary Color (Opposite 180°)

triadicColorsFormatted — Triadic Harmony (120° & 240°)

analogousColorsFormatted — Analogous Neighbors (-30° & +30°)

splitComplementaryFormatted — Split-Complementary (150° & 210°)

tintAndShadeFormatted — Monochromatic Tint (+25% L) & Shade (-25% L)

Mathematical relationships extracted from calculation logic:

rN = r / 255, gN = g / 255, bN = b / 255

h = 0, s = 0, l = (max + min) / 2

d = max - min

s = l > 0.5 ? d / (2 - max - min) : d / (max + min)

c = (1 - Math.abs(2 l - 1)) s

x = c * (1 - Math.abs((h / 60) % 2 - 1))

m = l - c / 2

rFinal = Math.round((r + m) * 255)

gFinal = Math.round((g + m) * 255)

bFinal = Math.round((b + m) * 255)

Standard: NIST Handbook 44 and BIPM SI unit definitions

Worked Example

A web designer building a website around a royal blue theme (#2563EB) generates the exact 180° complementary golden amber accent #EBAE25 for call-to-action buttons, creating high visual contrast and user engagement.

Understanding Your Result

Unit conversions are exact by definition within a given measurement system (e.g., 1 km = exactly 1,000 m). Cross-system conversions (metric to imperial) use defined exchange factors: 1 inch = exactly 2.54 cm; 1 pound = 0.45359237 kg. Round your converted result to match the precision of your original measurement — expressing more decimal places than your input justifies implies false accuracy. For regulatory, legal, or safety-critical applications, verify which measurement system is required by the applicable standard.