This tool is part of these guided projects. Each project provides step-by-step instructions with checklists and all the tools you need in one place.
Tools you might need next
Simulate protanopia, deuteranopia, tritanopia, and other color vision deficiencies. Check color accessibility for designers.
Generate lighter and darker shades from any base color. Build tints and shades palettes for UI themes, buttons, hover states, and accessible contrast.
Convert color temperature between Kelvin and RGB approximations. Map warm and cool white lighting values for photography, video, and UI white balance.
Complementary colors sit opposite each other on the color wheel (180° apart in hue). They create maximum contrast and visual tension when placed adjacent.
Complementary Hue = (Base Hue + 180) mod 360A split-complementary scheme uses the two colors adjacent to the complement (±30° from complement). This provides high contrast with less visual tension than direct complementary.
Updated: July 2026
Determine the complementary color for a primary blue brand color.
→ Complementary: H:37 → warm orange/amber
Find a high-contrast accent for a primarily green interface.
→ Complementary: H:322 → magenta/pink accent
Full-saturation complementary pairs create visual vibration (simultaneous contrast). Desaturate one color or use different lightness levels to reduce eye strain.
Color wheel position depends on the color model. HSL complementary differs from RYB (paint) complementary. For digital design, use HSL/OKLCH; for art, use RYB theory.
Find complementary colors on the color wheel from any hue. Get opposite-pair hex codes for high-contrast palettes, accents, and vibrant design schemes. It applies the complementary color theory (Complementary Hue = (Base Hue + 180) mod 360). For example: find complement of brand blue — Determine the complementary color for a primary blue brand color.