色名 · #68554E
Library Leather
Library Leatherは#68554E：rgb(104 85 78)、hsl(16 14% 36%)、oklch(0.467 0.028 41.2)。ティント、シェード、ハーモニー、WCAG/APCAコントラスト、CSS・Tailwind v4・SCSSコードを確認できます。
What does Gray mean? → · Library Leather color name →
#68554E
oklch(0.467 0.028 41.2)
カラー変換
- HEX
- #68554e
- RGB
- rgb(104 85 78)
- HSL
- hsl(16 14% 36%)
- HWB
- hwb(16 31% 59%)
- OKLCH
- oklch(0.467 0.028 41.2)
- OKLab
- oklab(0.467 0.021 0.018)
- CIE Lab
- lab(37.94 7.21 7.2)
- LCH
- lch(37.94 10.19 44.9)
- CMYK
- cmyk(0% 18% 25% 59%)
ティント · シェード · トーン
ティント
- 76645E
- 84746E
- 93857F
- A29590
- B1A6A2
- C0B7B4
- D0C9C6
- DFDBD9
- EFEDEC
シェード
- 594943
- 4B3D38
- 3E312D
- 302623
- 241C19
- 18110F
- 0C0807
- 040202
- 000000
トーン
- 6A5953
- 6D5D58
- 6F625D
- 726662
- 746A67
- 776F6C
- 797371
- 7B7776
- 7E7C7B
カラーハーモニー
補色 +180°
- 68554E
Library Leather
- 495E65
≈ Blue Tapestry
類似色 -30° +30°
- 68554E
Library Leather
- 685456
≈ Ripe Fig
- 645849
≈ Winter Oak
トライアド +120° +240°
- 68554E
Library Leather
- 4D5F55
≈ Cloudy Viridian
- 575869
≈ Ripe Berry
スプリットコンプリメンタリー +150° +210°
- 68554E
Library Leather
- 485F5E
≈ Midnight Teal
- 4F5B69
≈ Storm Rising
テトラード +90° +180° +270°
- 68554E
Library Leather
- 545D4D
≈ Brierwood Green
- 495E65
≈ Blue Tapestry
- 5F5666
≈ Ripe Berry
コントラストとアクセシビリティ
Ag
AAA白の上
WCAG 7.00:1 · APCA Lc 84
Ag
Fail黒の上
WCAG 2.99:1 · APCA Lc 18
最適な文字色: #FFFFFF
WCAG 7.00:1 (AAA) · APCA Lc 84
Contrast pairs
コードスニペット
CSS
:root {
--library-leather: #68554e;
--library-leather-rgb: 104 85 78;
--library-leather-oklch: oklch(0.467 0.028 41.2);
}
.element {
color: var(--library-leather);
background-color: hsl(16 14% 36%);
border-color: oklch(0.467 0.028 41.2);
}Tailwind CSS v4
@theme {
--color-library-leather: #68554e;
--color-library-leather-50: #fdf3ef;
--color-library-leather-100: #f0e5e1;
--color-library-leather-200: #dfd1cb;
--color-library-leather-300: #c4b3ac;
--color-library-leather-400: #ae9992;
--color-library-leather-500: #978178;
--color-library-leather-600: #806d66;
--color-library-leather-700: #665751;
--color-library-leather-800: #4b3f3b;
--color-library-leather-900: #342c29;
--color-library-leather-950: #201917;
}SCSS
$library-leather: #68554e;
$library-leather-rgb: 104, 85, 78;
$library-leather-light: mix(#fff, $library-leather, 20%);
$library-leather-dark: mix(#000, $library-leather, 20%);
.element {
color: $library-leather;
box-shadow: 0 0 0 2px rgba($library-leather, 0.35);
}