Cor nomeada · #EBCCB3
Sweet Orange
Sweet Orange é #EBCCB3: rgb(235 204 179), hsl(27 58% 81%), oklch(0.865 0.049 61). Veja tons claros, sombras, harmonias, contraste WCAG e APCA e código CSS, Tailwind v4 e SCSS.
What does Orange mean? → · Sweet Orange color name →
#EBCCB3
oklch(0.865 0.049 61)
Conversões de cor
- HEX
- #ebccb3
- RGB
- rgb(235 204 179)
- HSL
- hsl(27 58% 81%)
- HWB
- hwb(27 70% 8%)
- OKLCH
- oklch(0.865 0.049 61)
- OKLab
- oklab(0.865 0.024 0.042)
- CIE Lab
- lab(84.23 8.47 16.73)
- LCH
- lch(84.23 18.76 63.1)
- CMYK
- cmyk(0% 13% 24% 8%)
Tons claros · Sombras · Tons
Tons claros
- EDD1BB
- EFD6C2
- F1DBCA
- F3E0D1
- F5E5D9
- F7EBE0
- F9F0E8
- FBF5F0
- FDFAF7
Sombras
- CCB19B
- AE9784
- 917E6E
- 756558
- 5B4E43
- 41372F
- 29221D
- 130F0C
- 030201
Tons
- E0C4AE
- D5BCA9
- CAB5A4
- BFAD9F
- B4A599
- AA9E94
- 9F968F
- 958F8A
- 8A8785
Harmonias de cor
Complementar +180°
- EBCCB3
Sweet Orange
- B7D7F0
≈ Summer Birthday
Análoga -30° +30°
- EBCCB3
Sweet Orange
- F1C8BF
≈ Prairie Rose
- DED2AF
≈ Stardust
Tríade +120° +240°
- EBCCB3
Sweet Orange
- B1DED4
≈ Jaded Clouds
- D8CCEE
≈ Plum’s the Word
Complementar dividida +150° +210°
- EBCCB3
Sweet Orange
- AFDCE5
≈ Light Washed Blue
- C6D2F3
≈ Frozen Periwinkle
Tétrade +90° +180° +270°
- EBCCB3
Sweet Orange
- BCDCC3
≈ Sprite Twist
- B7D7F0
≈ Summer Birthday
- E6C8E2
≈ Pink Pony
Contraste e acessibilidade
Ag
FailSobre branco
WCAG 1.51:1 · APCA Lc 24
Ag
AAASobre preto
WCAG 13.82:1 · APCA Lc 79
Melhor cor de texto: #000000
WCAG 13.82:1 (AAA) · APCA Lc 79
Contrast pairs
Trechos de código
CSS
:root {
--sweet-orange: #ebccb3;
--sweet-orange-rgb: 235 204 179;
--sweet-orange-oklch: oklch(0.865 0.049 61);
}
.element {
color: var(--sweet-orange);
background-color: hsl(27 58% 81%);
border-color: oklch(0.865 0.049 61);
}Tailwind CSS v4
@theme {
--color-sweet-orange: #ebccb3;
--color-sweet-orange-50: #fff3e7;
--color-sweet-orange-100: #f4e5d8;
--color-sweet-orange-200: #e4d0bf;
--color-sweet-orange-300: #cab39e;
--color-sweet-orange-400: #b49882;
--color-sweet-orange-500: #9e7f65;
--color-sweet-orange-600: #866c56;
--color-sweet-orange-700: #6b5645;
--color-sweet-orange-800: #4f3e32;
--color-sweet-orange-900: #372b22;
--color-sweet-orange-950: #221811;
}SCSS
$sweet-orange: #ebccb3;
$sweet-orange-rgb: 235, 204, 179;
$sweet-orange-light: mix(#fff, $sweet-orange, 20%);
$sweet-orange-dark: mix(#000, $sweet-orange, 20%);
.element {
color: $sweet-orange;
box-shadow: 0 0 0 2px rgba($sweet-orange, 0.35);
}