Color con nombre · #CCAA4D
Yellow Lupine
Yellow Lupine es #CCAA4D: rgb(204 170 77), hsl(44 55% 55%), oklch(0.75 0.118 89.1). Mira tintes, sombras, armonías, contraste WCAG y APCA, y código CSS, Tailwind v4 y SCSS.
What does Yellow mean? → · Yellow Lupine color name →
#CCAA4D
oklch(0.75 0.118 89.1)
Conversiones de color
- HEX
- #ccaa4d
- RGB
- rgb(204 170 77)
- HSL
- hsl(44 55% 55%)
- HWB
- hwb(44 30% 20%)
- OKLCH
- oklch(0.75 0.118 89.1)
- OKLab
- oklab(0.75 0.002 0.118)
- CIE Lab
- lab(71.35 5.1 51.49)
- LCH
- lch(71.35 51.74 84.3)
- CMYK
- cmyk(0% 17% 62% 20%)
Tintes · Sombras · Tonos
Tintes
- D1B362
- D6BB75
- DBC487
- E0CC99
- E5D5AA
- EBDDBB
- F0E6CC
- F5EEDD
- FAF7EE
Sombras
- B19342
- 977D37
- 7E682C
- 655322
- 4E3F18
- 372D0F
- 221B07
- 0F0B02
- 020100
Tonos
- C4A655
- BCA25C
- B59E62
- AD9A68
- A5956D
- 9E9171
- 968D75
- 8F8979
- 87847D
Armonías de color
Complementario +180°
- CCAA4D
Yellow Lupine
- 90AAF9
≈ Kitten’s Eye
Análogo -30° +30°
- CCAA4D
Yellow Lupine
- E59B5D
≈ Coffee Whip
- A6B95E
≈ Gooseberry Fool
Triádico +120° +240°
- CCAA4D
Yellow Lupine
- 34C2D6
≈ The Crowd Roars!
- D892D3
≈ Somewhere in a Fairytale
Complementario dividido +150° +210°
- CCAA4D
Yellow Lupine
- 5FB8F1
≈ Norfolk Sky
- B99DEE
≈ Lavender Cream
Tetrádico +90° +180° +270°
- CCAA4D
Yellow Lupine
- 42C6B0
≈ Disc Jockey
- 90AAF9
≈ Kitten’s Eye
- EB8DAC
≈ Charm Pink
Contraste y accesibilidad
Ag
FailSobre blanco
WCAG 2.22:1 · APCA Lc 44
Ag
AAASobre negro
WCAG 9.42:1 · APCA Lc 58
Mejor color de texto: #000000
WCAG 9.42:1 (AAA) · APCA Lc 58
Contrast pairs
Fragmentos de código
CSS
:root {
--yellow-lupine: #ccaa4d;
--yellow-lupine-rgb: 204 170 77;
--yellow-lupine-oklch: oklch(0.75 0.118 89.1);
}
.element {
color: var(--yellow-lupine);
background-color: hsl(44 55% 55%);
border-color: oklch(0.75 0.118 89.1);
}Tailwind CSS v4
@theme {
--color-yellow-lupine: #ccaa4d;
--color-yellow-lupine-50: #fff5cf;
--color-yellow-lupine-100: #f6e7bc;
--color-yellow-lupine-200: #e7d39a;
--color-yellow-lupine-300: #ceb66f;
--color-yellow-lupine-400: #ba9b43;
--color-yellow-lupine-500: #a58100;
--color-yellow-lupine-600: #8c6d00;
--color-yellow-lupine-700: #705704;
--color-yellow-lupine-800: #543f01;
--color-yellow-lupine-900: #3a2b02;
--color-yellow-lupine-950: #251800;
}SCSS
$yellow-lupine: #ccaa4d;
$yellow-lupine-rgb: 204, 170, 77;
$yellow-lupine-light: mix(#fff, $yellow-lupine, 20%);
$yellow-lupine-dark: mix(#000, $yellow-lupine, 20%);
.element {
color: $yellow-lupine;
box-shadow: 0 0 0 2px rgba($yellow-lupine, 0.35);
}