Color con nombre · #ED681F
Island Orange
Island Orange es #ED681F: rgb(237 104 31), hsl(21 85% 53%), oklch(0.672 0.182 44.3). Mira tintes, sombras, armonías, contraste WCAG y APCA, y código CSS, Tailwind v4 y SCSS.
What does Red mean? → · Island Orange color name →
#ED681F
oklch(0.672 0.182 44.3)
Conversiones de color
- HEX
- #ed681f
- RGB
- rgb(237 104 31)
- HSL
- hsl(21 85% 53%)
- HWB
- hwb(21 12% 7%)
- OKLCH
- oklch(0.672 0.182 44.3)
- OKLab
- oklab(0.672 0.13 0.127)
- CIE Lab
- lab(60.65 50 62.39)
- LCH
- lch(60.65 79.95 51.3)
- CMYK
- cmyk(0% 56% 87% 7%)
Tintes · Sombras · Tonos
Tintes
- F17940
- F48958
- F7996F
- FAA884
- FCB799
- FEC5AD
- FFD4C2
- FFE2D6
- FFF1EA
Sombras
- CE5919
- B04B14
- 933E0F
- 77300A
- 5C2406
- 421803
- 2A0C01
- 140400
- 030000
Tonos
- E36C32
- D9703F
- CE734A
- C47654
- B9795C
- AE7B64
- A37D6C
- 987E73
- 8C7F7A
Armonías de color
Complementario +180°
- ED681F
Island Orange
- 00A5CF
≈ Charybdis
Análogo -30° +30°
- ED681F
Island Orange
- F05C73
≈ Pink Pepper
- C98600
≈ Bubonic Brown
Triádico +120° +240°
- ED681F
Island Orange
- 00B17E
≈ Salsify Grass
- 8C81FF
≈ Periwinkle
Complementario dividido +150° +210°
- ED681F
Island Orange
- 00ABAB
≈ Jade Orchid
- 3B97FF
≈ Brilliant Azure
Tetrádico +90° +180° +270°
- ED681F
Island Orange
- 62AD20
≈ Dark Slimelime
- 00A5CF
≈ Charybdis
- BE6EE2
≈ Lavender
Contraste y accesibilidad
Ag
FailSobre blanco
WCAG 3.18:1 · APCA Lc 58
Ag
AASobre negro
WCAG 6.60:1 · APCA Lc 44
Mejor color de texto: #000000
WCAG 6.60:1 (AA) · APCA Lc 44
Contrast pairs
Fragmentos de código
CSS
:root {
--island-orange: #ed681f;
--island-orange-rgb: 237 104 31;
--island-orange-oklch: oklch(0.672 0.182 44.3);
}
.element {
color: var(--island-orange);
background-color: hsl(21 85% 53%);
border-color: oklch(0.672 0.182 44.3);
}Tailwind CSS v4
@theme {
--color-island-orange: #ed681f;
--color-island-orange-50: #ffe6ca;
--color-island-orange-100: #ffd6b5;
--color-island-orange-200: #ffbc91;
--color-island-orange-300: #ff9762;
--color-island-orange-400: #f37435;
--color-island-orange-500: #e24f00;
--color-island-orange-600: #bf4400;
--color-island-orange-700: #993600;
--color-island-orange-800: #732500;
--color-island-orange-900: #511900;
--color-island-orange-950: #360800;
}SCSS
$island-orange: #ed681f;
$island-orange-rgb: 237, 104, 31;
$island-orange-light: mix(#fff, $island-orange, 20%);
$island-orange-dark: mix(#000, $island-orange, 20%);
.element {
color: $island-orange;
box-shadow: 0 0 0 2px rgba($island-orange, 0.35);
}