Cor nomeada · #FECD01
Tangerine Yellow
Tangerine Yellow é #FECD01: rgb(254 205 1), hsl(48 99% 50%), oklch(0.866 0.177 91.2). Veja tons claros, sombras, harmonias, contraste WCAG e APCA e código CSS, Tailwind v4 e SCSS.
What does Yellow mean? → · Tangerine Yellow color name →
#FECD01
oklch(0.866 0.177 91.2)
Conversões de cor
- HEX
- #fecd01
- RGB
- rgb(254 205 1)
- HSL
- hsl(48 99% 50%)
- HWB
- hwb(48 0% 0%)
- OKLCH
- oklch(0.866 0.177 91.2)
- OKLab
- oklab(0.866 -0.004 0.177)
- CIE Lab
- lab(84.9 7.34 84.74)
- LCH
- lch(84.9 85.06 85.1)
- CMYK
- cmyk(0% 19% 100% 0%)
Tons claros · Sombras · Tons
Tons claros
- FED344
- FED862
- FFDD7B
- FFE290
- FFE8A4
- FFECB7
- FFF1CA
- FFF6DC
- FFFBEE
Sombras
- DDB201
- BD9801
- 9E7E00
- 806600
- 634E00
- 473800
- 2D2300
- 160F00
- 030200
Tons
- F1C531
- E4BE45
- D7B653
- CAAF5D
- BDA766
- B19F6D
- A49873
- 989078
- 8C887C
Harmonias de cor
Complementar +180°
- FECD01
Tangerine Yellow
- C3D1FF
≈ Lavender Blue
Análoga -30° +30°
- FECD01
Tangerine Yellow
- FFC696
≈ Dainty Apricot
- C2E44D
≈ Energos
Tríade +120° +240°
- FECD01
Tangerine Yellow
- 66E8FF
≈ Robin’s Egg
- FFB7F5
≈ Hermosa Pink
Complementar dividida +150° +210°
- FECD01
Tangerine Yellow
- A9DAFF
≈ Droplet
- DCC8FF
≈ Neon Boneyard
Tétrade +90° +180° +270°
- FECD01
Tangerine Yellow
- 00F4D9
≈ Frozen Boubble
- C3D1FF
≈ Lavender Blue
- FFBED0
≈ Garden Glory
Contraste e acessibilidade
Ag
FailSobre branco
WCAG 1.50:1 · APCA Lc 23
Ag
AAASobre preto
WCAG 13.94:1 · APCA Lc 80
Melhor cor de texto: #000000
WCAG 13.94:1 (AAA) · APCA Lc 80
Contrast pairs
Trechos de código
CSS
:root {
--tangerine-yellow: #fecd01;
--tangerine-yellow-rgb: 254 205 1;
--tangerine-yellow-oklch: oklch(0.866 0.177 91.2);
}
.element {
color: var(--tangerine-yellow);
background-color: hsl(48 99% 50%);
border-color: oklch(0.866 0.177 91.2);
}Tailwind CSS v4
@theme {
--color-tangerine-yellow: #fecd01;
--color-tangerine-yellow-50: #fff5bc;
--color-tangerine-yellow-100: #fce7a4;
--color-tangerine-yellow-200: #eed378;
--color-tangerine-yellow-300: #d6b538;
--color-tangerine-yellow-400: #c59800;
--color-tangerine-yellow-500: #b17d00;
--color-tangerine-yellow-600: #966a00;
--color-tangerine-yellow-700: #785500;
--color-tangerine-yellow-800: #5b3d00;
--color-tangerine-yellow-900: #3f2a00;
--color-tangerine-yellow-950: #281700;
}SCSS
$tangerine-yellow: #fecd01;
$tangerine-yellow-rgb: 254, 205, 1;
$tangerine-yellow-light: mix(#fff, $tangerine-yellow, 20%);
$tangerine-yellow-dark: mix(#000, $tangerine-yellow, 20%);
.element {
color: $tangerine-yellow;
box-shadow: 0 0 0 2px rgba($tangerine-yellow, 0.35);
}