What is Complementary Colors?

Complementary Colors — Glosarium

Two colors positioned directly opposite each other on the color wheel, creating high contrast when paired.

Detail Teknis

The complementary colors is based on the three primary models: RYB (traditional pigment), RGB (additive light), and CMYK (subtractive print). In the perceptually uniform OKLCH color space, equal numerical distances correspond to equal perceived differences — unlike HSL where a 10-degree hue shift appears dramatically different at different lightness levels. Modern CSS supports oklch() natively, enabling designers to create harmonies with mathematically consistent perceptual contrast.

Contoh

```css
/* Complementary Colors: design specification example */
.component {
  font-family: Inter, system-ui, sans-serif;
  font-size: 1rem;
  line-height: 1.5;
  color: #1a1a1a;
  padding: 1rem 1.5rem;
}
```

Alat Terkait

C Color Palette Generator T Type Scale Generator S Spacing Scale Generator R Responsive Breakpoints A Aspect Ratio Calculator C Color Shade Generator F Font Pairing Suggestions C Contrast Checker D Design Tokens Generator S Social Media Size Guide K Kalkulator Rasio Emas P Panduan Ukuran Ikon Aplikasi G Generator Sistem Shadow G Generator Gradien Multi-Stop G Generator Pola CSS

Istilah Terkait

Color Wheel Analogous Colors Triadic Colors Contrast Ratio Negative Space Visual Hierarchy Grid System Typeface Font Weight Tracking Golden Ratio Wireframe Mockup Responsive Design Affordance Color Blindness HSL Design Token Modular Scale Baseline Grid Gestalt Principles Hick's Law Fitts's Law Monochromatic Color Split-Complementary Accessibility Material Design Design System Information Architecture Prototype Color Temperature Rule of Thirds