色名 · #4E3C32
Rootstock
Rootstockは#4E3C32：rgb(78 60 50)、hsl(21 22% 25%)、oklch(0.373 0.03 50.5)。ティント、シェード、ハーモニー、WCAG/APCAコントラスト、CSS・Tailwind v4・SCSSコードを確認できます。
What does Gray mean? → · Rootstock color name →
#4E3C32
oklch(0.373 0.03 50.5)
カラー変換
- HEX
- #4e3c32
- RGB
- rgb(78 60 50)
- HSL
- hsl(21 22% 25%)
- HWB
- hwb(21 20% 69%)
- OKLCH
- oklch(0.373 0.03 50.5)
- OKLab
- oklab(0.373 0.019 0.023)
- CIE Lab
- lab(27.1 6.93 9.38)
- LCH
- lch(27.1 11.66 53.5)
- CMYK
- cmyk(0% 23% 36% 69%)
ティント · シェード · トーン
ティント
- 5E4D44
- 6F5F56
- 80716A
- 91847E
- A29892
- B4ACA7
- C7C0BC
- D9D5D2
- ECEAE8
シェード
- 43332A
- 382A22
- 2D211B
- 231914
- 19110D
- 0F0A07
- 070403
- 020101
- 000000
トーン
- 534239
- 584941
- 5D5048
- 625650
- 675D58
- 6C6460
- 716B68
- 767270
- 7B7978
カラーハーモニー
補色 +180°
- 4E3C32
Rootstock
- 30444E
≈ Gale Force
類似色 -30° +30°
- 4E3C32
Rootstock
- 503A3A
≈ Dark Puce
- 493F2E
≈ Flirtatious Indigo Tea
トライアド +120° +240°
- 4E3C32
Rootstock
- 30463E
≈ Bracken Fern
- 403E50
≈ Blueberry Tart
スプリットコンプリメンタリー +150° +210°
- 4E3C32
Rootstock
- 2D4547
≈ Little Mermaid
- 374151
≈ Midnight Navy
テトラード +90° +180° +270°
- 4E3C32
Rootstock
- 384535
≈ Mallardish
- 30444E
≈ Gale Force
- 483B4B
≈ Funkie Friday
コントラストとアクセシビリティ
Ag
AAA白の上
WCAG 10.41:1 · APCA Lc 94
Ag
Fail黒の上
WCAG 2.01:1 · APCA Lc 8
最適な文字色: #FFFFFF
WCAG 10.41:1 (AAA) · APCA Lc 94
Contrast pairs
コードスニペット
CSS
:root {
--rootstock: #4e3c32;
--rootstock-rgb: 78 60 50;
--rootstock-oklch: oklch(0.373 0.03 50.5);
}
.element {
color: var(--rootstock);
background-color: hsl(21 22% 25%);
border-color: oklch(0.373 0.03 50.5);
}Tailwind CSS v4
@theme {
--color-rootstock: #4e3c32;
--color-rootstock-50: #fdf3ed;
--color-rootstock-100: #f1e5df;
--color-rootstock-200: #dfd1c9;
--color-rootstock-300: #c5b3a9;
--color-rootstock-400: #ae9a8f;
--color-rootstock-500: #978174;
--color-rootstock-600: #806d63;
--color-rootstock-700: #67574f;
--color-rootstock-800: #4c3f39;
--color-rootstock-900: #342c27;
--color-rootstock-950: #201915;
}SCSS
$rootstock: #4e3c32;
$rootstock-rgb: 78, 60, 50;
$rootstock-light: mix(#fff, $rootstock, 20%);
$rootstock-dark: mix(#000, $rootstock, 20%);
.element {
color: $rootstock;
box-shadow: 0 0 0 2px rgba($rootstock, 0.35);
}