#CCF29A#CCF29A
#CCF29A es un color muy claro y vivo de la familia amarillo verdoso. Luminancia relativa 0.787; OKLCH L 91.4% C 0.120 H 127.6°. El mejor color de texto es #000000 con contraste 16.74:1 (cumple WCAG AA).
Valores del color
| HEX | #CCF29A |
|---|---|
| RGB | rgb(204, 242, 154) |
| HSL | hsl(86, 77%, 78%) |
| HSV | hsv(86, 36%, 95%) |
| CMYK | cmyk(15.7%, 0%, 36.4%, 5.1%) |
| CIE-LAB | lab(91.09, -26.82, 38.52) |
| CIE-LCH | lch(91.09, 46.93, 124.85°) |
| OKLab | oklab(91.37% -0.0733 0.0952) |
| OKLCH | oklch(91.37% 0.12 127.6) |
| XYZ | xyz(62.4860, 78.6741, 42.4592) |
| Luminance | 0.7867 (WCAG relative) |
| Temperature | warm |
| Family | yellow-green |
Colores con nombre más cercanos
Celery
#C1FD95
ΔE00 4.01
Tea Green
#BDF8A3
ΔE00 4.01
Pistachio (survey)
#C0FA8B
ΔE00 4.10
Washed Out Green
#BCF5A6
ΔE00 4.29
Light Light Green
#C8FFB0
ΔE00 4.59
Light Yellowish Green
#C2FF89
ΔE00 5.10
Escalas perceptuales
Sombras
Matices
Tonos
OKLCH scale
Armonías de color
complementary
#CCF29A #C09AF2
analogous
#F2EC9A #CCF29A #A0F29A
triadic
#CCF29A #9ACCF2 #F29ACC
tetradic
#CCF29A #9AF2EC #C09AF2 #F29AA0
square
#CCF29A #9AF2EC #C09AF2 #F29AA0
split-complementary
#CCF29A #9AA0F2 #EC9AF2
monochromatic
#95E42E #B1EB64 #CCF29A #E7F9D0 #F1FCE4
Accesibilidad y contraste
On white
1.25
#CCF29A on #FFFFFF
AA ✗AA large ✗AAA ✗
On black
16.74
#CCF29A on #000000
AA ✓AA large ✓AAA ✓
Mejor color de texto
#000000 on #CCF29A
16.74:1 — WCAG AA (texto normal) cumple
Matriz de contraste
| fg \ bg | ##CCF29A | #FFFFFF | #000000 | ##000000 |
|---|---|---|---|---|
| ##CCF29A | 1.00 | 1.25 | 16.74 | 16.74 |
| #FFFFFF | 1.25 | 1.00 | 21.00 | 21.00 |
| #000000 | 16.74 | 21.00 | 1.00 | 1.00 |
| ##000000 | 16.74 | 21.00 | 1.00 | 1.00 |
Vista previa de daltonismo
Protanopia (red-blind)
#FBE794
Deuteranopia (green-blind)
#F5E59E
Tritanopia (blue-blind)
#D0EBDC
Achromatopsia (no color)
#E5E5E5
Tokens de diseño y código
CSS
--color: #ccf29a; /* rgb */ color: rgb(204, 242, 154); /* oklch */ color: oklch(91.4% 0.120 127.6);
Tailwind
colors: {
custom: {
50: '#dcf6b8',
500: '#ccf29a',
950: '#000000',
},
}SCSS
$custom: #ccf29a; $custom-light: #dcf6b8; $custom-dark: #000000;
JSON
{
"hex": "#ccf29a",
"rgb": {
"r": 204,
"g": 242,
"b": 154
},
"hsl": {
"h": 85.909,
"s": 77.193,
"l": 77.647
},
"oklch": {
"l": 0.91374,
"c": 0.12011,
"h": 127.6
},
"luminance": 0.78675
}Semantic roles & 50–950 ramp
primary
#CCF29A
secondary
#9160D0
accent
#0CD965
background
#FEFFFD
surface
#FCFEF8
border
#D5D6D1
text
#151711
muted
#848581
Laboratorio de vista previa
Laboratorio de vista previa → · Comprobador de contraste → · Generador de paletas →