色名 · #FFAA77
Larch Bolete
Larch Boleteは#FFAA77：rgb(255 170 119)、hsl(22 100% 73%)、oklch(0.81 0.12 51.3)。ティント、シェード、ハーモニー、WCAG/APCAコントラスト、CSS・Tailwind v4・SCSSコードを確認できます。
What does Orange mean? → · Larch Bolete color name →
#FFAA77
oklch(0.81 0.12 51.3)
カラー変換
- HEX
- #ffaa77
- RGB
- rgb(255 170 119)
- HSL
- hsl(22 100% 73%)
- HWB
- hwb(22 47% 0%)
- OKLCH
- oklch(0.81 0.12 51.3)
- OKLab
- oklab(0.81 0.075 0.094)
- CIE Lab
- lab(77.39 28.37 39.59)
- LCH
- lch(77.39 48.7 54.4)
- CMYK
- cmyk(0% 33% 53% 0%)
ティント · シェード · トーン
ティント
- FFB385
- FFBC93
- FFC4A1
- FFCDAF
- FFD5BC
- FFDEC9
- FFE6D7
- FFEEE4
- FFF7F2
シェード
- DE9367
- BE7D57
- 9E6847
- 805338
- 633F2A
- 482D1C
- 2E1B10
- 160B05
- 030101
トーン
- F2A679
- E5A27B
- D99E7C
- CC9A7D
- BF967E
- B3927F
- A68D7F
- 998980
- 8D8580
カラーハーモニー
補色 +180°
- FFAA77
Larch Bolete
- 69CEFF
≈ Skyan
類似色 -30° +30°
- FFAA77
Larch Bolete
- FFA5A3
≈ Pink Dream
- E8B960
≈ Chandra Cream
トライアド +120° +240°
- FFAA77
Larch Bolete
- 62DAB7
≈ Beryl
- C1B5FF
≈ Greyish Lavender
スプリットコンプリメンタリー +150° +210°
- FFAA77
Larch Bolete
- 47D8E1
≈ Neon Nazar
- 9FC2FF
≈ Pastel Blue
テトラード +90° +180° +270°
- FFAA77
Larch Bolete
- 95D58B
≈ Dentist Green
- 69CEFF
≈ Skyan
- E5A7F0
≈ Petal Plush
コントラストとアクセシビリティ
Ag
Fail白の上
WCAG 1.86:1 · APCA Lc 35
Ag
AAA黒の上
WCAG 11.26:1 · APCA Lc 68
最適な文字色: #000000
WCAG 11.26:1 (AAA) · APCA Lc 68
Contrast pairs
コードスニペット
CSS
:root {
--larch-bolete: #ffaa77;
--larch-bolete-rgb: 255 170 119;
--larch-bolete-oklch: oklch(0.81 0.12 51.3);
}
.element {
color: var(--larch-bolete);
background-color: hsl(22 100% 73%);
border-color: oklch(0.81 0.12 51.3);
}Tailwind CSS v4
@theme {
--color-larch-bolete: #ffaa77;
--color-larch-bolete-50: #ffedd6;
--color-larch-bolete-100: #ffdec3;
--color-larch-bolete-200: #fec7a4;
--color-larch-bolete-300: #e8a67c;
--color-larch-bolete-400: #d78959;
--color-larch-bolete-500: #c36c31;
--color-larch-bolete-600: #a55c2b;
--color-larch-bolete-700: #854922;
--color-larch-bolete-800: #633418;
--color-larch-bolete-900: #462410;
--color-larch-bolete-950: #2d1203;
}SCSS
$larch-bolete: #ffaa77;
$larch-bolete-rgb: 255, 170, 119;
$larch-bolete-light: mix(#fff, $larch-bolete, 20%);
$larch-bolete-dark: mix(#000, $larch-bolete, 20%);
.element {
color: $larch-bolete;
box-shadow: 0 0 0 2px rgba($larch-bolete, 0.35);
}