色名 · #9F6949
Foxfire Brown
Foxfire Brownは#9F6949：rgb(159 105 73)、hsl(22 37% 45%)、oklch(0.571 0.083 51.1)。ティント、シェード、ハーモニー、WCAG/APCAコントラスト、CSS・Tailwind v4・SCSSコードを確認できます。
What does Brown mean? → · Foxfire Brown color name →
#9F6949
oklch(0.571 0.083 51.1)
カラー変換
- HEX
- #9f6949
- RGB
- rgb(159 105 73)
- HSL
- hsl(22 37% 45%)
- HWB
- hwb(22 29% 38%)
- OKLCH
- oklch(0.571 0.083 51.1)
- OKLab
- oklab(0.571 0.052 0.065)
- CIE Lab
- lab(49.79 19.66 27.21)
- LCH
- lch(49.79 33.57 54.1)
- CMYK
- cmyk(0% 34% 54% 38%)
ティント · シェード · トーン
ティント
- A9775B
- B3866C
- BD947E
- C6A38F
- D0B2A1
- D9C1B4
- E3D0C6
- ECE0D9
- F6EFEC
シェード
- 8A5A3E
- 754C34
- 613E2A
- 4D3120
- 3B2417
- 29180E
- 180C06
- 090402
- 010000
トーン
- 9C6C4F
- 9A6E55
- 97715B
- 947360
- 917566
- 8E786B
- 8A7A70
- 877C76
- 847E7B
カラーハーモニー
補色 +180°
- 9F6949
Foxfire Brown
- 3D80A0
≈ Dirty Blue
類似色 -30° +30°
- 9F6949
Foxfire Brown
- A36362
≈ Herald of Spring
- 91723A
≈ Sepia Yellow
トライアド +120° +240°
- 9F6949
Foxfire Brown
- 3C8871
≈ Ionian
- 786FA5
≈ Toy Mauve
スプリットコンプリメンタリー +150° +210°
- 9F6949
Foxfire Brown
- 2C868C
≈ Thai Teal
- 5C78A9
≈ Blue Yonder
テトラード +90° +180° +270°
- 9F6949
Foxfire Brown
- 5C8455
≈ Magic Sage
- 3D80A0
≈ Dirty Blue
- 8E6796
≈ Viola Grey
コントラストとアクセシビリティ
Ag
AA白の上
WCAG 4.57:1 · APCA Lc 72
Ag
AA黒の上
WCAG 4.59:1 · APCA Lc 30
最適な文字色: #000000
WCAG 4.59:1 (AA) · APCA Lc 30
Contrast pairs
コードスニペット
CSS
:root {
--foxfire-brown: #9f6949;
--foxfire-brown-rgb: 159 105 73;
--foxfire-brown-oklch: oklch(0.571 0.083 51.1);
}
.element {
color: var(--foxfire-brown);
background-color: hsl(22 37% 45%);
border-color: oklch(0.571 0.083 51.1);
}Tailwind CSS v4
@theme {
--color-foxfire-brown: #9f6949;
--color-foxfire-brown-50: #ffefe0;
--color-foxfire-brown-100: #ffe1cf;
--color-foxfire-brown-200: #f2cbb4;
--color-foxfire-brown-300: #daac90;
--color-foxfire-brown-400: #c79171;
--color-foxfire-brown-500: #b27652;
--color-foxfire-brown-600: #976446;
--color-foxfire-brown-700: #795037;
--color-foxfire-brown-800: #5a3928;
--color-foxfire-brown-900: #3f271b;
--color-foxfire-brown-950: #28150b;
}SCSS
$foxfire-brown: #9f6949;
$foxfire-brown-rgb: 159, 105, 73;
$foxfire-brown-light: mix(#fff, $foxfire-brown, 20%);
$foxfire-brown-dark: mix(#000, $foxfire-brown, 20%);
.element {
color: $foxfire-brown;
box-shadow: 0 0 0 2px rgba($foxfire-brown, 0.35);
}