最も近い色名 · #786A58
#786A58
最も近い色名: Granite
#786A58（rgb(120 106 88)、hsl(34 15% 41%)、oklch(0.532 0.032 74)）に最も近い色名はGraniteです。ティント、シェード、ハーモニー、WCAG/APCAコントラスト、CSS・Tailwind v4・SCSSコードを確認できます。
#786A58
oklch(0.532 0.032 74)
カラー変換
- HEX
- #786a58
- RGB
- rgb(120 106 88)
- HSL
- hsl(34 15% 41%)
- HWB
- hwb(34 35% 53%)
- OKLCH
- oklch(0.532 0.032 74)
- OKLab
- oklab(0.532 0.009 0.031)
- CIE Lab
- lab(45.77 3.45 12.28)
- LCH
- lch(45.77 12.75 74.3)
- CMYK
- cmyk(0% 12% 27% 53%)
ティント · シェード · トーン
ティント
- 857867
- 928677
- 9F9487
- ACA397
- B9B2A8
- C7C1B9
- D5D0CA
- E3DFDB
- F1EFED
シェード
- 675B4B
- 574D3F
- 483F33
- 393128
- 2A241D
- 1D1812
- 100D09
- 050403
- 010000
トーン
- 796C5C
- 7A6E60
- 7A7164
- 7B7368
- 7C756C
- 7D7770
- 7E7974
- 7E7C78
- 7F7E7C
カラーハーモニー
補色 +180°
- 786A58
Granite
- 606E7F
≈ Glide Time
類似色 -30° +30°
- 786A58
Granite
- 7D675D
≈ Cocoa Milk
- 6F6E58
≈ Secluded Green
トライアド +120° +240°
- 786A58
Granite
- 577372
≈ Evening Emerald
- 73677A
≈ Decadence
スプリットコンプリメンタリー +150° +210°
- 786A58
Granite
- 59717B
≈ Bowman Blue
- 6A6A7F
≈ Nostalgic
テトラード +90° +180° +270°
- 786A58
Granite
- 5C7367
≈ Hilltop
- 606E7F
≈ Glide Time
- 7B6571
≈ Cabal
コントラストとアクセシビリティ
Ag
AA白の上
WCAG 5.24:1 · APCA Lc 76
Ag
Fail黒の上
WCAG 4.00:1 · APCA Lc 26
最適な文字色: #FFFFFF
WCAG 5.24:1 (AA) · APCA Lc 76
Contrast pairs
コードスニペット
CSS
:root {
--granite: #786a58;
--granite-rgb: 120 106 88;
--granite-oklch: oklch(0.532 0.032 74);
}
.element {
color: var(--granite);
background-color: hsl(34 15% 41%);
border-color: oklch(0.532 0.032 74);
}Tailwind CSS v4
@theme {
--color-granite: #786a58;
--color-granite-50: #fbf4eb;
--color-granite-100: #eee7dc;
--color-granite-200: #dcd3c5;
--color-granite-300: #c1b6a6;
--color-granite-400: #aa9c8a;
--color-granite-500: #93836f;
--color-granite-600: #7d6f5e;
--color-granite-700: #64594b;
--color-granite-800: #4a4136;
--color-granite-900: #332d25;
--color-granite-950: #1f1a14;
}SCSS
$granite: #786a58;
$granite-rgb: 120, 106, 88;
$granite-light: mix(#fff, $granite, 20%);
$granite-dark: mix(#000, $granite, 20%);
.element {
color: $granite;
box-shadow: 0 0 0 2px rgba($granite, 0.35);
}