Color con nombre · #E18E3F
Orange Drop
Orange Drop es #E18E3F: rgb(225 142 63), hsl(29 73% 56%), oklch(0.719 0.137 61). Mira tintes, sombras, armonías, contraste WCAG y APCA, y código CSS, Tailwind v4 y SCSS.
What does Orange mean? → · Orange Drop color name →
#E18E3F
oklch(0.719 0.137 61)
Conversiones de color
- HEX
- #e18e3f
- RGB
- rgb(225 142 63)
- HSL
- hsl(29 73% 56%)
- HWB
- hwb(29 25% 12%)
- OKLCH
- oklch(0.719 0.137 61)
- OKLab
- oklab(0.719 0.066 0.12)
- CIE Lab
- lab(66.86 27.67 54.05)
- LCH
- lch(66.86 60.72 62.9)
- CMYK
- cmyk(0% 37% 72% 12%)
Tintes · Sombras · Tonos
Tintes
- E59A56
- E9A56B
- ECB17E
- F0BC91
- F3C7A4
- F6D2B6
- F8DEC8
- FBE9DA
- FDF4ED
Sombras
- C47B35
- A7682C
- 8B5623
- 70441B
- 563412
- 3E240A
- 271504
- 120701
- 020100
Tonos
- D78D49
- CE8C52
- C48B5A
- BB8A61
- B18967
- A7876D
- 9E8672
- 948477
- 8A827C
Armonías de color
Complementario +180°
- E18E3F
Orange Drop
- 45AEF1
≈ Adamantine Blue
Análogo -30° +30°
- E18E3F
Orange Drop
- ED816E
≈ Melondrama
- C4A025
≈ Mustard Seed
Triádico +120° +240°
- E18E3F
Orange Drop
- 00BEA9
≈ Tealish
- B38FEC
≈ Dreamy Candy Forest
Complementario dividido +150° +210°
- E18E3F
Orange Drop
- 00B8D0
≈ Utopia Beckons
- 859EFA
≈ Periwinkle Blue
Tetrádico +90° +180° +270°
- E18E3F
Orange Drop
- 5BBC77
≈ Verdigris Coloured
- 45AEF1
≈ Adamantine Blue
- D583CB
≈ Pink Punk
Contraste y accesibilidad
Ag
FailSobre blanco
WCAG 2.57:1 · APCA Lc 50
Ag
AAASobre negro
WCAG 8.14:1 · APCA Lc 52
Mejor color de texto: #000000
WCAG 8.14:1 (AAA) · APCA Lc 52
Contrast pairs
Fragmentos de código
CSS
:root {
--orange-drop: #e18e3f;
--orange-drop-rgb: 225 142 63;
--orange-drop-oklch: oklch(0.719 0.137 61);
}
.element {
color: var(--orange-drop);
background-color: hsl(29 73% 56%);
border-color: oklch(0.719 0.137 61);
}Tailwind CSS v4
@theme {
--color-orange-drop: #e18e3f;
--color-orange-drop-50: #ffedce;
--color-orange-drop-100: #ffdfb9;
--color-orange-drop-200: #ffc897;
--color-orange-drop-300: #e9a86b;
--color-orange-drop-400: #d88a40;
--color-orange-drop-500: #c56c00;
--color-orange-drop-600: #a65c00;
--color-orange-drop-700: #864a00;
--color-orange-drop-800: #643402;
--color-orange-drop-900: #462402;
--color-orange-drop-950: #2e1200;
}SCSS
$orange-drop: #e18e3f;
$orange-drop-rgb: 225, 142, 63;
$orange-drop-light: mix(#fff, $orange-drop, 20%);
$orange-drop-dark: mix(#000, $orange-drop, 20%);
.element {
color: $orange-drop;
box-shadow: 0 0 0 2px rgba($orange-drop, 0.35);
}