Cor nomeada · #FFDD99
Butter Cupcake
Butter Cupcake é #FFDD99: rgb(255 221 153), hsl(40 100% 80%), oklch(0.911 0.093 84.1). Veja tons claros, sombras, harmonias, contraste WCAG e APCA e código CSS, Tailwind v4 e SCSS.
What does Orange mean? → · Butter Cupcake color name →
#FFDD99
oklch(0.911 0.093 84.1)
Conversões de cor
- HEX
- #ffdd99
- RGB
- rgb(255 221 153)
- HSL
- hsl(40 100% 80%)
- HWB
- hwb(40 60% 0%)
- OKLCH
- oklch(0.911 0.093 84.1)
- OKLab
- oklab(0.911 0.01 0.093)
- CIE Lab
- lab(89.87 5.56 37.97)
- LCH
- lch(89.87 38.37 81.7)
- CMYK
- cmyk(0% 13% 40% 0%)
Tons claros · Sombras · Tons
Tons claros
- FFE1A4
- FFE4AF
- FFE8B9
- FFEBC3
- FFEECD
- FFF2D7
- FFF5E1
- FFF8EB
- FFFCF5
Sombras
- DEC084
- BEA470
- 9E885D
- 806E4A
- 635538
- 483D27
- 2E2617
- 161108
- 030201
Tons
- F2D397
- E4CA95
- D7C093
- CAB791
- BEAE8E
- B1A48C
- A59B89
- 989286
- 8C8983
Harmonias de cor
Complementar +180°
- FFDD99
Butter Cupcake
- D3E2FF
≈ Contrail
Análoga -30° +30°
- FFDD99
Butter Cupcake
- FFD9C1
≈ Sun-Kissed Peach
- E0E9A1
≈ Wedge of Lime
Tríade +120° +240°
- FFDD99
Butter Cupcake
- 92F4FE
≈ Shallow Water
- FCD1FF
≈ Pink Diamond
Complementar dividida +150° +210°
- FFDD99
Butter Cupcake
- C1E8FF
≈ Blue Java Banana
- E3DCFF
≈ Contrail
Tétrade +90° +180° +270°
- FFDD99
Butter Cupcake
- 9DF6DD
≈ Mintie
- D3E2FF
≈ Contrail
- FFD4E4
≈ Poplar Pink
Contraste e acessibilidade
Ag
FailSobre branco
WCAG 1.30:1 · APCA Lc 15
Ag
AAASobre preto
WCAG 16.05:1 · APCA Lc 89
Melhor cor de texto: #000000
WCAG 16.05:1 (AAA) · APCA Lc 89
Contrast pairs
Trechos de código
CSS
:root {
--butter-cupcake: #ffdd99;
--butter-cupcake-rgb: 255 221 153;
--butter-cupcake-oklch: oklch(0.911 0.093 84.1);
}
.element {
color: var(--butter-cupcake);
background-color: hsl(40 100% 80%);
border-color: oklch(0.911 0.093 84.1);
}Tailwind CSS v4
@theme {
--color-butter-cupcake: #ffdd99;
--color-butter-cupcake-50: #fff4d8;
--color-butter-cupcake-100: #f6e6c5;
--color-butter-cupcake-200: #e6d2a7;
--color-butter-cupcake-300: #cdb580;
--color-butter-cupcake-400: #b89a5c;
--color-butter-cupcake-500: #a38034;
--color-butter-cupcake-600: #8a6d2e;
--color-butter-cupcake-700: #6f5724;
--color-butter-cupcake-800: #523f18;
--color-butter-cupcake-900: #392b10;
--color-butter-cupcake-950: #241903;
}SCSS
$butter-cupcake: #ffdd99;
$butter-cupcake-rgb: 255, 221, 153;
$butter-cupcake-light: mix(#fff, $butter-cupcake, 20%);
$butter-cupcake-dark: mix(#000, $butter-cupcake, 20%);
.element {
color: $butter-cupcake;
box-shadow: 0 0 0 2px rgba($butter-cupcake, 0.35);
}