Color con nombre · #ECC100
Poster Yellow
Poster Yellow es #ECC100: rgb(236 193 0), hsl(49 100% 46%), oklch(0.825 0.169 92.6). Mira tintes, sombras, armonías, contraste WCAG y APCA, y código CSS, Tailwind v4 y SCSS.
What does Yellow mean? → · Poster Yellow color name →
#ECC100
oklch(0.825 0.169 92.6)
Conversiones de color
- 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%)
Tintes · Sombras · Tonos
Tintes
- EEC841
- F0CE5F
- F2D577
- F4DB8D
- F6E1A1
- F7E7B5
- F9EDC8
- FBF3DA
- FDF9ED
Sombras
- CDA700
- AF8F00
- 927700
- 765F00
- 5B4900
- 423400
- 292000
- 130E00
- 030200
Tonos
- E1BB2F
- D6B442
- CAAE50
- BFA85A
- B5A163
- AA9B6B
- 9F9471
- 958D77
- 8A877C
Armonías de color
Complementario +180°
- ECC100
Poster Yellow
- B2C3FF
≈ Light Periwinkle
Análogo -30° +30°
- ECC100
Poster Yellow
- FFB36C
≈ Apricot
- B2D64B
≈ Solid Gold
Triádico +120° +240°
- ECC100
Poster Yellow
- 00DDFC
≈ Vaporwave Blue
- FF9FF0
≈ Pink Elephants
Complementario dividido +150° +210°
- ECC100
Poster Yellow
- 8DCDFF
≈ Clear Sky
- D3B5FF
≈ Light Violet
Tetrádico +90° +180° +270°
- ECC100
Poster Yellow
- 00E4CE
≈ Ice Climber
- B2C3FF
≈ Light Periwinkle
- FFA9BF
≈ Amélie’s Tutu
Contraste y accesibilidad
Ag
FailSobre blanco
WCAG 1.72:1 · APCA Lc 31
Ag
AAASobre negro
WCAG 12.19:1 · APCA Lc 72
Mejor color de texto: #000000
WCAG 12.19:1 (AAA) · APCA Lc 72
Contrast pairs
Fragmentos de código
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);
}