Nazwany kolor · #DAA436
Yellow Jasper
Yellow Jasper to #DAA436: rgb(218 164 54), hsl(40 69% 53%), oklch(0.751 0.137 81.1). Zobacz odcienie jaśniejsze i ciemniejsze, harmonie, kontrast WCAG i APCA oraz kod CSS, Tailwind v4 i SCSS.
What does Orange mean? → · Yellow Jasper color name →
#DAA436
oklch(0.751 0.137 81.1)
Konwersje koloru
- HEX
- #daa436
- RGB
- rgb(218 164 54)
- HSL
- hsl(40 69% 53%)
- HWB
- hwb(40 21% 15%)
- OKLCH
- oklch(0.751 0.137 81.1)
- OKLab
- oklab(0.751 0.021 0.135)
- CIE Lab
- lab(71.17 13.23 61.52)
- LCH
- lch(71.17 62.93 77.9)
- CMYK
- cmyk(0% 25% 75% 15%)
Odcienie jaśniejsze · Odcienie ciemniejsze · Tony
Odcienie jaśniejsze
- DEAD51
- E2B768
- E6C07D
- EAC990
- EDD2A3
- F1DBB6
- F5E4C8
- F8EDDB
- FCF6ED
Odcienie ciemniejsze
- BD8E2E
- A27925
- 87641E
- 6C5016
- 543D0F
- 3C2B08
- 251A03
- 110A01
- 020100
Tony
- D1A144
- C89D4E
- BF9A57
- B6965F
- AD9366
- A48F6C
- 9B8C72
- 928877
- 89847C
Harmonie kolorów
Komplementarna +180°
- DAA436
Yellow Jasper
- 80AEFF
≈ Kitten’s Eye
Analogowa -30° +30°
- DAA436
Yellow Jasper
- F29358
≈ Orange Slice
- B2B643
≈ Japanese Fern
Triada +120° +240°
- DAA436
Yellow Jasper
- 00C6CF
≈ Turquoise Surf
- D590E2
≈ Bright Lilac
Komplementarna rozszczepiona +150° +210°
- DAA436
Yellow Jasper
- 36BDF5
≈ Megaman
- AF9EFE
≈ Shy Moment
Tetrada +90° +180° +270°
- DAA436
Yellow Jasper
- 2FCAA3
≈ Jadeite
- 80AEFF
≈ Kitten’s Eye
- EF88B9
≈ Brown Knapweed
Kontrast i dostępność
Ag
FailNa bieli
WCAG 2.24:1 · APCA Lc 44
Ag
AAANa czerni
WCAG 9.34:1 · APCA Lc 58
Najlepszy kolor tekstu: #000000
WCAG 9.34:1 (AAA) · APCA Lc 58
Contrast pairs
Fragmenty kodu
CSS
:root {
--yellow-jasper: #daa436;
--yellow-jasper-rgb: 218 164 54;
--yellow-jasper-oklch: oklch(0.751 0.137 81.1);
}
.element {
color: var(--yellow-jasper);
background-color: hsl(40 69% 53%);
border-color: oklch(0.751 0.137 81.1);
}Tailwind CSS v4
@theme {
--color-yellow-jasper: #daa436;
--color-yellow-jasper-50: #fff2c9;
--color-yellow-jasper-100: #fee5b4;
--color-yellow-jasper-200: #f1d090;
--color-yellow-jasper-300: #d9b161;
--color-yellow-jasper-400: #c7952c;
--color-yellow-jasper-500: #b37a00;
--color-yellow-jasper-600: #986700;
--color-yellow-jasper-700: #7a5300;
--color-yellow-jasper-800: #5b3b00;
--color-yellow-jasper-900: #402900;
--color-yellow-jasper-950: #291600;
}SCSS
$yellow-jasper: #daa436;
$yellow-jasper-rgb: 218, 164, 54;
$yellow-jasper-light: mix(#fff, $yellow-jasper, 20%);
$yellow-jasper-dark: mix(#000, $yellow-jasper, 20%);
.element {
color: $yellow-jasper;
box-shadow: 0 0 0 2px rgba($yellow-jasper, 0.35);
}