Benannte Farbe · #CAB266
Canadian Maple
Canadian Maple ist #CAB266: rgb(202 178 102), hsl(46 49% 60%), oklch(0.768 0.1 92.4). Mit Tints, Shades, Harmonien, WCAG- & APCA-Kontrast sowie CSS-, Tailwind-v4- und SCSS-Code.
What does Yellow mean? → · Canadian Maple color name →
#CAB266
oklch(0.768 0.1 92.4)
Farbumrechnungen
- HEX
- #cab266
- RGB
- rgb(202 178 102)
- HSL
- hsl(46 49% 60%)
- HWB
- hwb(46 40% 21%)
- OKLCH
- oklch(0.768 0.1 92.4)
- OKLab
- oklab(0.768 -0.004 0.1)
- CIE Lab
- lab(73.46 1.67 41.87)
- LCH
- lch(73.46 41.9 87.7)
- CMYK
- cmyk(0% 12% 50% 21%)
Tints · Shades · Tones
Tints
- CFBA76
- D4C186
- DAC996
- DFD1A5
- E4D9B4
- EAE0C3
- EFE8D2
- F4F0E1
- FAF7F0
Shades
- AF9A58
- 95834A
- 7C6D3C
- 64572F
- 4D4323
- 372F17
- 221D0C
- 0F0C04
- 020100
Tones
- C2AD6A
- BBA86E
- B3A371
- AC9E74
- A49976
- 9D9479
- 968F7B
- 8E8A7D
- 87857F
Farbharmonien
Komplementär +180°
- CAB266
Canadian Maple
- 9EB0F4
≈ Wondrous Wisteria
Analog -30° +30°
- CAB266
Canadian Maple
- E1A56F
≈ Gehenna’s Gold
- A8BE75
≈ Tan Green
Triadisch +120° +240°
- CAB266
Canadian Maple
- 5CC4D9
≈ Naxos Sky
- DA9CD0
≈ Velvet Horizon
Geteilt komplementär +150° +210°
- CAB266
Canadian Maple
- 78BBEE
≈ Aero
- C0A4E9
≈ Silver Rust
Tetradisch +90° +180° +270°
- CAB266
Canadian Maple
- 60C9B9
≈ Cockatoo
- 9EB0F4
≈ Wondrous Wisteria
- E999AE
≈ Second Blush
Kontrast & Barrierefreiheit
Ag
FailAuf Weiß
WCAG 2.08:1 · APCA Lc 41
Ag
AAAAuf Schwarz
WCAG 10.07:1 · APCA Lc 62
Beste Textfarbe: #000000
WCAG 10.07:1 (AAA) · APCA Lc 62
Contrast pairs
Code-Snippets
CSS
:root {
--canadian-maple: #cab266;
--canadian-maple-rgb: 202 178 102;
--canadian-maple-oklch: oklch(0.768 0.1 92.4);
}
.element {
color: var(--canadian-maple);
background-color: hsl(46 49% 60%);
border-color: oklch(0.768 0.1 92.4);
}Tailwind CSS v4
@theme {
--color-canadian-maple: #cab266;
--color-canadian-maple-50: #fef5d6;
--color-canadian-maple-100: #f2e8c3;
--color-canadian-maple-200: #e2d4a4;
--color-canadian-maple-300: #c8b77c;
--color-canadian-maple-400: #b39d56;
--color-canadian-maple-500: #9e842a;
--color-canadian-maple-600: #857026;
--color-canadian-maple-700: #6b591e;
--color-canadian-maple-800: #504113;
--color-canadian-maple-900: #372d0c;
--color-canadian-maple-950: #221901;
}SCSS
$canadian-maple: #cab266;
$canadian-maple-rgb: 202, 178, 102;
$canadian-maple-light: mix(#fff, $canadian-maple, 20%);
$canadian-maple-dark: mix(#000, $canadian-maple, 20%);
.element {
color: $canadian-maple;
box-shadow: 0 0 0 2px rgba($canadian-maple, 0.35);
}