Benoemde kleur · #ECC100
Poster Yellow
Poster Yellow is #ECC100: rgb(236 193 0), hsl(49 100% 46%), oklch(0.825 0.169 92.6). Bekijk tinten, schaduwen, harmonieën, WCAG- en APCA-contrast en CSS-, Tailwind v4- en SCSS-code.
What does Yellow mean? → · Poster Yellow color name →
#ECC100
oklch(0.825 0.169 92.6)
Kleurconversies
- HEX
- #ecc100
- RGB
- rgb(236 193 0)
- HSL
- hsl(49 100% 46%)
- HWB
- hwb(49 0% 7%)
- OKLCH
- oklch(0.825 0.169 92.6)
- OKLab
- oklab(0.825 -0.008 0.169)
- CIE Lab
- lab(80.12 5.6 80.67)
- LCH
- lch(80.12 80.87 86)
- CMYK
- cmyk(0% 18% 100% 7%)
Tinten · Schaduwen · Tonen
Tinten
- EEC841
- F0CE5F
- F2D577
- F4DB8D
- F6E1A1
- F7E7B5
- F9EDC8
- FBF3DA
- FDF9ED
Schaduwen
- CDA700
- AF8F00
- 927700
- 765F00
- 5B4900
- 423400
- 292000
- 130E00
- 030200
Tonen
- E1BB2F
- D6B442
- CAAE50
- BFA85A
- B5A163
- AA9B6B
- 9F9471
- 958D77
- 8A877C
Kleurharmonieën
Complementair +180°
- ECC100
Poster Yellow
- B2C3FF
≈ Light Periwinkle
Analoog -30° +30°
- ECC100
Poster Yellow
- FFB36C
≈ Apricot
- B2D64B
≈ Solid Gold
Triadisch +120° +240°
- ECC100
Poster Yellow
- 00DDFC
≈ Vaporwave Blue
- FF9FF0
≈ Pink Elephants
Gesplitst complementair +150° +210°
- ECC100
Poster Yellow
- 8DCDFF
≈ Clear Sky
- D3B5FF
≈ Light Violet
Tetradisch +90° +180° +270°
- ECC100
Poster Yellow
- 00E4CE
≈ Ice Climber
- B2C3FF
≈ Light Periwinkle
- FFA9BF
≈ Amélie’s Tutu
Contrast en toegankelijkheid
Ag
FailOp wit
WCAG 1.72:1 · APCA Lc 31
Ag
AAAOp zwart
WCAG 12.19:1 · APCA Lc 72
Beste tekstkleur: #000000
WCAG 12.19:1 (AAA) · APCA Lc 72
Contrast pairs
Codefragmenten
CSS
:root {
--poster-yellow: #ecc100;
--poster-yellow-rgb: 236 193 0;
--poster-yellow-oklch: oklch(0.825 0.169 92.6);
}
.element {
color: var(--poster-yellow);
background-color: hsl(49 100% 46%);
border-color: oklch(0.825 0.169 92.6);
}Tailwind CSS v4
@theme {
--color-poster-yellow: #ecc100;
--color-poster-yellow-50: #fff5bf;
--color-poster-yellow-100: #fae8a7;
--color-poster-yellow-200: #ebd47d;
--color-poster-yellow-300: #d3b643;
--color-poster-yellow-400: #c19a00;
--color-poster-yellow-500: #ad7f00;
--color-poster-yellow-600: #926c00;
--color-poster-yellow-700: #755600;
--color-poster-yellow-800: #583e00;
--color-poster-yellow-900: #3e2b00;
--color-poster-yellow-950: #271800;
}SCSS
$poster-yellow: #ecc100;
$poster-yellow-rgb: 236, 193, 0;
$poster-yellow-light: mix(#fff, $poster-yellow, 20%);
$poster-yellow-dark: mix(#000, $poster-yellow, 20%);
.element {
color: $poster-yellow;
box-shadow: 0 0 0 2px rgba($poster-yellow, 0.35);
}