色名 · #DAA436
Yellow Jasper
Yellow Jasperは#DAA436：rgb(218 164 54)、hsl(40 69% 53%)、oklch(0.751 0.137 81.1)。ティント、シェード、ハーモニー、WCAG/APCAコントラスト、CSS・Tailwind v4・SCSSコードを確認できます。
What does Orange mean? → · Yellow Jasper color name →
#DAA436
oklch(0.751 0.137 81.1)
カラー変換
- 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%)
ティント · シェード · トーン
ティント
- DEAD51
- E2B768
- E6C07D
- EAC990
- EDD2A3
- F1DBB6
- F5E4C8
- F8EDDB
- FCF6ED
シェード
- BD8E2E
- A27925
- 87641E
- 6C5016
- 543D0F
- 3C2B08
- 251A03
- 110A01
- 020100
トーン
- D1A144
- C89D4E
- BF9A57
- B6965F
- AD9366
- A48F6C
- 9B8C72
- 928877
- 89847C
カラーハーモニー
補色 +180°
- DAA436
Yellow Jasper
- 80AEFF
≈ Kitten’s Eye
類似色 -30° +30°
- DAA436
Yellow Jasper
- F29358
≈ Orange Slice
- B2B643
≈ Japanese Fern
トライアド +120° +240°
- DAA436
Yellow Jasper
- 00C6CF
≈ Turquoise Surf
- D590E2
≈ Bright Lilac
スプリットコンプリメンタリー +150° +210°
- DAA436
Yellow Jasper
- 36BDF5
≈ Megaman
- AF9EFE
≈ Shy Moment
テトラード +90° +180° +270°
- DAA436
Yellow Jasper
- 2FCAA3
≈ Jadeite
- 80AEFF
≈ Kitten’s Eye
- EF88B9
≈ Brown Knapweed
コントラストとアクセシビリティ
Ag
Fail白の上
WCAG 2.24:1 · APCA Lc 44
Ag
AAA黒の上
WCAG 9.34:1 · APCA Lc 58
最適な文字色: #000000
WCAG 9.34:1 (AAA) · APCA Lc 58
Contrast pairs
コードスニペット
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);
}