Nazwany kolor · #DE8F4E
Jasper Orange
Jasper Orange to #DE8F4E: rgb(222 143 78), hsl(27 69% 59%), oklch(0.718 0.125 58.3). Zobacz odcienie jaśniejsze i ciemniejsze, harmonie, kontrast WCAG i APCA oraz kod CSS, Tailwind v4 i SCSS.
What does Orange mean? → · Jasper Orange color name →
#DE8F4E
oklch(0.718 0.125 58.3)
Konwersje koloru
- HEX
- #de8f4e
- RGB
- rgb(222 143 78)
- HSL
- hsl(27 69% 59%)
- HWB
- hwb(27 31% 13%)
- OKLCH
- oklch(0.718 0.125 58.3)
- OKLab
- oklab(0.718 0.066 0.107)
- CIE Lab
- lab(66.83 26.51 46.81)
- LCH
- lch(66.83 53.8 60.5)
- CMYK
- cmyk(0% 36% 65% 13%)
Odcienie jaśniejsze · Odcienie ciemniejsze · Tony
Odcienie jaśniejsze
- E29A62
- E6A674
- EAB186
- EEBC97
- F1C7A9
- F4D3BA
- F7DECB
- FAE9DC
- FDF4EE
Odcienie ciemniejsze
- C17C43
- A56938
- 89572D
- 6F4523
- 553419
- 3D240F
- 261507
- 120702
- 020100
Tony
- D58E55
- CB8D5C
- C28C62
- B98A67
- B0896C
- A68770
- 9D8675
- 938479
- 8A827C
Harmonie kolorów
Komplementarna +180°
- DE8F4E
Jasper Orange
- 4CAEE9
≈ Blue Jeans
Analogowa -30° +30°
- DE8F4E
Jasper Orange
- E88477
≈ Cultured Rose
- C49F39
≈ Golden Field
Triada +120° +240°
- DE8F4E
Jasper Orange
- 24BDA4
≈ First Post
- AE92E8
≈ Dreamy Candy Forest
Komplementarna rozszczepiona +150° +210°
- DE8F4E
Jasper Orange
- 00B9CD
≈ Utopia Beckons
- 83A0F3
≈ Periwinkle Blue
Tetrada +90° +180° +270°
- DE8F4E
Jasper Orange
- 68BA77
≈ Citronella
- 4CAEE9
≈ Blue Jeans
- CF87CB
≈ Purception
Kontrast i dostępność
Ag
FailNa bieli
WCAG 2.57:1 · APCA Lc 50
Ag
AAANa czerni
WCAG 8.14:1 · APCA Lc 52
Najlepszy kolor tekstu: #000000
WCAG 8.14:1 (AAA) · APCA Lc 52
Contrast pairs
Fragmenty kodu
CSS
:root {
--jasper-orange: #de8f4e;
--jasper-orange-rgb: 222 143 78;
--jasper-orange-oklch: oklch(0.718 0.125 58.3);
}
.element {
color: var(--jasper-orange);
background-color: hsl(27 69% 59%);
border-color: oklch(0.718 0.125 58.3);
}Tailwind CSS v4
@theme {
--color-jasper-orange: #de8f4e;
--color-jasper-orange-50: #ffeed2;
--color-jasper-orange-100: #ffdfbe;
--color-jasper-orange-200: #fdc89e;
--color-jasper-orange-300: #e7a874;
--color-jasper-orange-400: #d58b4e;
--color-jasper-orange-500: #c26e1c;
--color-jasper-orange-600: #a45d1b;
--color-jasper-orange-700: #844b16;
--color-jasper-orange-800: #62350f;
--color-jasper-orange-900: #452409;
--color-jasper-orange-950: #2d1300;
}SCSS
$jasper-orange: #de8f4e;
$jasper-orange-rgb: 222, 143, 78;
$jasper-orange-light: mix(#fff, $jasper-orange, 20%);
$jasper-orange-dark: mix(#000, $jasper-orange, 20%);
.element {
color: $jasper-orange;
box-shadow: 0 0 0 2px rgba($jasper-orange, 0.35);
}