Cor nomeada · #F6BB00
Decor Yellow
Decor Yellow é #F6BB00: rgb(246 187 0), hsl(46 100% 48%), oklch(0.823 0.169 85.5). Veja tons claros, sombras, harmonias, contraste WCAG e APCA e código CSS, Tailwind v4 e SCSS.
What does Yellow mean? → · Decor Yellow color name →
#F6BB00
oklch(0.823 0.169 85.5)
Conversões de cor
- HEX
- #f6bb00
- RGB
- rgb(246 187 0)
- HSL
- hsl(46 100% 48%)
- HWB
- hwb(46 0% 4%)
- OKLCH
- oklch(0.823 0.169 85.5)
- OKLab
- oklab(0.823 0.013 0.168)
- CIE Lab
- lab(79.69 12.81 81)
- LCH
- lch(79.69 82.01 81)
- CMYK
- cmyk(0% 24% 100% 4%)
Tons claros · Sombras · Tons
Tons claros
- F7C240
- F8CA5E
- F9D177
- FAD88D
- FBDEA1
- FCE5B5
- FDECC8
- FEF2DA
- FEF9ED
Sombras
- D6A200
- B78A00
- 987300
- 7B5C00
- 5F4600
- 453200
- 2C1F00
- 150D00
- 030200
Tons
- EAB52E
- DEB042
- D2AA4F
- C6A45A
- BA9E63
- AE986A
- A29271
- 978C77
- 8B867C
Harmonias de cor
Complementar +180°
- F6BB00
Decor Yellow
- AAC5FF
≈ Night Snow
Análoga -30° +30°
- F6BB00
Decor Yellow
- FFB17A
≈ Cantaloupe Slice
- C1D13A
≈ Grunervetliner
Tríade +120° +240°
- F6BB00
Decor Yellow
- 00DEF1
≈ Tamarama
- FB9DFF
≈ Pinkalicious
Complementar dividida +150° +210°
- F6BB00
Decor Yellow
- 7FD0FF
≈ Drift on the Sea
- CAB8FF
≈ Violet Heaven
Tétrade +90° +180° +270°
- F6BB00
Decor Yellow
- 00E5C0
≈ Aquamarine
- AAC5FF
≈ Night Snow
- FFA7C8
≈ Taffy Pink
Contraste e acessibilidade
Ag
FailSobre branco
WCAG 1.74:1 · APCA Lc 32
Ag
AAASobre preto
WCAG 12.02:1 · APCA Lc 71
Melhor cor de texto: #000000
WCAG 12.02:1 (AAA) · APCA Lc 71
Contrast pairs
Trechos de código
CSS
:root {
--decor-yellow: #f6bb00;
--decor-yellow-rgb: 246 187 0;
--decor-yellow-oklch: oklch(0.823 0.169 85.5);
}
.element {
color: var(--decor-yellow);
background-color: hsl(46 100% 48%);
border-color: oklch(0.823 0.169 85.5);
}Tailwind CSS v4
@theme {
--color-decor-yellow: #f6bb00;
--color-decor-yellow-50: #fff3be;
--color-decor-yellow-100: #ffe5a7;
--color-decor-yellow-200: #f3d07d;
--color-decor-yellow-300: #dcb142;
--color-decor-yellow-400: #cb9400;
--color-decor-yellow-500: #b77900;
--color-decor-yellow-600: #9b6600;
--color-decor-yellow-700: #7c5200;
--color-decor-yellow-800: #5e3b00;
--color-decor-yellow-900: #422800;
--color-decor-yellow-950: #2a1600;
}SCSS
$decor-yellow: #f6bb00;
$decor-yellow-rgb: 246, 187, 0;
$decor-yellow-light: mix(#fff, $decor-yellow, 20%);
$decor-yellow-dark: mix(#000, $decor-yellow, 20%);
.element {
color: $decor-yellow;
box-shadow: 0 0 0 2px rgba($decor-yellow, 0.35);
}