Monochromatic Color
Monochromatic Color Scheme
A palette using variations of a single hue through different tints, shades, and tones for subtle, cohesive designs.
التفاصيل التقنية
The monochromatic color 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.
مثال
```css
/* HSL color system for design tokens */
:root {
--hue-primary: 225; /* blue */
--primary-50: hsl(var(--hue-primary), 100%, 97%);
--primary-500: hsl(var(--hue-primary), 84%, 60%);
--primary-900: hsl(var(--hue-primary), 84%, 15%);
}
/* Change --hue-primary to theme entire site */
```
أدوات ذات صلة
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
G
Golden Ratio Calculator
A
App Icon Size Guide
C
CSS Color Converter
S
Shadow System Generator
M
Multi-Stop Gradient Generator
C
CSS Pattern Generator