Cor nomeada · #FAAC72
Orange Marmalade
Orange Marmalade é #FAAC72: rgb(250 172 114), hsl(26 93% 71%), oklch(0.808 0.118 56.8). Veja tons claros, sombras, harmonias, contraste WCAG e APCA e código CSS, Tailwind v4 e SCSS.
What does Orange mean? → · Orange Marmalade color name →
#FAAC72
oklch(0.808 0.118 56.8)
Conversões de cor
- HEX
- #faac72
- RGB
- rgb(250 172 114)
- HSL
- hsl(26 93% 71%)
- HWB
- hwb(26 45% 2%)
- OKLCH
- oklch(0.808 0.118 56.8)
- OKLab
- oklab(0.808 0.065 0.099)
- CIE Lab
- lab(77.2 25.1 41.75)
- LCH
- lch(77.2 48.72 59)
- CMYK
- cmyk(0% 31% 54% 2%)
Tons claros · Sombras · Tons
Tons claros
- FBB581
- FCBD90
- FDC69E
- FECEAC
- FFD6BA
- FFDEC8
- FFE7D6
- FFEFE3
- FFF7F1
Sombras
- D99562
- BA7F53
- 9B6944
- 7D5436
- 614028
- 462D1B
- 2D1B0E
- 150B04
- 030101
Tons
- EEA875
- E1A477
- D59F79
- C99B7B
- BD977C
- B0927D
- A48E7E
- 98897F
- 8C8580
Harmonias de cor
Complementar +180°
- FAAC72
Orange Marmalade
- 75CBFF
≈ Bubbly Barracuda
Análoga -30° +30°
- FAAC72
Orange Marmalade
- FFA49A
≈ Corally
- E1BB60
≈ Lemon Surprise
Tríade +120° +240°
- FAAC72
Orange Marmalade
- 5CD9BE
≈ Peppy
- C7B1FF
≈ Teasel Dipsacus
Complementar dividida +150° +210°
- FAAC72
Orange Marmalade
- 4CD5E6
≈ Thousand Sons Blue
- A4BFFF
≈ Pastel Blue
Tétrade +90° +180° +270°
- FAAC72
Orange Marmalade
- 8CD593
≈ May Apple
- 75CBFF
≈ Bubbly Barracuda
- E9A5E8
≈ Candy Floss
Contraste e acessibilidade
Ag
FailSobre branco
WCAG 1.87:1 · APCA Lc 35
Ag
AAASobre preto
WCAG 11.20:1 · APCA Lc 67
Melhor cor de texto: #000000
WCAG 11.20:1 (AAA) · APCA Lc 67
Contrast pairs
Trechos de código
CSS
:root {
--orange-marmalade: #faac72;
--orange-marmalade-rgb: 250 172 114;
--orange-marmalade-oklch: oklch(0.808 0.118 56.8);
}
.element {
color: var(--orange-marmalade);
background-color: hsl(26 93% 71%);
border-color: oklch(0.808 0.118 56.8);
}Tailwind CSS v4
@theme {
--color-orange-marmalade: #faac72;
--color-orange-marmalade-50: #ffeed4;
--color-orange-marmalade-100: #ffdfc2;
--color-orange-marmalade-200: #fbc9a2;
--color-orange-marmalade-300: #e5a97a;
--color-orange-marmalade-400: #d38b55;
--color-orange-marmalade-500: #c06f2b;
--color-orange-marmalade-600: #a25e26;
--color-orange-marmalade-700: #824b1e;
--color-orange-marmalade-800: #613615;
--color-orange-marmalade-900: #44250d;
--color-orange-marmalade-950: #2c1302;
}SCSS
$orange-marmalade: #faac72;
$orange-marmalade-rgb: 250, 172, 114;
$orange-marmalade-light: mix(#fff, $orange-marmalade, 20%);
$orange-marmalade-dark: mix(#000, $orange-marmalade, 20%);
.element {
color: $orange-marmalade;
box-shadow: 0 0 0 2px rgba($orange-marmalade, 0.35);
}