色名 · #8B987B
Leaflet
Leafletは#8B987B：rgb(139 152 123)、hsl(87 12% 54%)、oklch(0.661 0.044 127.2)。ティント、シェード、ハーモニー、WCAG/APCAコントラスト、CSS・Tailwind v4・SCSSコードを確認できます。
What does Green mean? → · Leaflet color name →
#8B987B
oklch(0.661 0.044 127.2)
カラー変換
- HEX
- #8b987b
- RGB
- rgb(139 152 123)
- HSL
- hsl(87 12% 54%)
- HWB
- hwb(87 48% 40%)
- OKLCH
- oklch(0.661 0.044 127.2)
- OKLab
- oklab(0.661 -0.027 0.035)
- CIE Lab
- lab(61.18 -8.89 13.68)
- LCH
- lch(61.18 16.32 123)
- CMYK
- cmyk(9% 0% 19% 40%)
ティント · シェード · トーン
ティント
- 96A288
- A1AC94
- ACB6A1
- B8C0AE
- C3CABB
- CFD5C9
- DBDFD6
- E7EAE3
- F3F4F1
シェード
- 78846A
- 66705A
- 545C4A
- 434A3A
- 32382C
- 23271E
- 141710
- 070805
- 010101
トーン
- 8A967C
- 89937C
- 88917D
- 878E7D
- 858C7E
- 848A7E
- 83877F
- 82857F
- 818280
カラーハーモニー
補色 +180°
- 8B987B
Leaflet
- 9A8CA8
≈ Futuristic
類似色 -30° +30°
- 8B987B
Leaflet
- 9A9374
≈ Mossy Gold
- 7D9B88
≈ Parisian Patina
トライアド +120° +240°
- 8B987B
Leaflet
- 7D96AD
≈ Nordland Blue
- AB888E
≈ Mask
スプリットコンプリメンタリー +150° +210°
- 8B987B
Leaflet
- 8B91AE
≈ Sephiroth Grey
- A5899C
≈ Evening Pink
テトラード +90° +180° +270°
コントラストとアクセシビリティ
Ag
Fail白の上
WCAG 3.05:1 · APCA Lc 57
Ag
AA黒の上
WCAG 6.87:1 · APCA Lc 44
最適な文字色: #000000
WCAG 6.87:1 (AA) · APCA Lc 44
Contrast pairs
コードスニペット
CSS
:root {
--leaflet: #8b987b;
--leaflet-rgb: 139 152 123;
--leaflet-oklch: oklch(0.661 0.044 127.2);
}
.element {
color: var(--leaflet);
background-color: hsl(87 12% 54%);
border-color: oklch(0.661 0.044 127.2);
}Tailwind CSS v4
@theme {
--color-leaflet: #8b987b;
--color-leaflet-50: #f1f8eb;
--color-leaflet-100: #e3ebdc;
--color-leaflet-200: #ced8c5;
--color-leaflet-300: #b0bca5;
--color-leaflet-400: #97a488;
--color-leaflet-500: #7e8c6c;
--color-leaflet-600: #6b765c;
--color-leaflet-700: #555f49;
--color-leaflet-800: #3f4535;
--color-leaflet-900: #2b3024;
--color-leaflet-950: #181c13;
}SCSS
$leaflet: #8b987b;
$leaflet-rgb: 139, 152, 123;
$leaflet-light: mix(#fff, $leaflet, 20%);
$leaflet-dark: mix(#000, $leaflet, 20%);
.element {
color: $leaflet;
box-shadow: 0 0 0 2px rgba($leaflet, 0.35);
}