色名 · #4E5B52
Forrester
Forresterは#4E5B52：rgb(78 91 82)、hsl(138 8% 33%)、oklch(0.457 0.022 155.2)。ティント、シェード、ハーモニー、WCAG/APCAコントラスト、CSS・Tailwind v4・SCSSコードを確認できます。
What does Gray mean? → · Forrester color name →
#4E5B52
oklch(0.457 0.022 155.2)
カラー変換
- HEX
- #4e5b52
- RGB
- rgb(78 91 82)
- HSL
- hsl(138 8% 33%)
- HWB
- hwb(138 31% 64%)
- OKLCH
- oklch(0.457 0.022 155.2)
- OKLab
- oklab(0.457 -0.02 0.009)
- CIE Lab
- lab(37.31 -6.75 3.42)
- LCH
- lch(37.31 7.57 153.1)
- CMYK
- cmyk(14% 0% 10% 64%)
ティント · シェード · トーン
ティント
- 5E6A62
- 6E7972
- 7F8982
- 919993
- A2A9A4
- B4BAB6
- C6CBC8
- D9DCDA
- ECEDEC
シェード
- 434E46
- 38413B
- 2D352F
- 232925
- 191E1A
- 0F1311
- 070908
- 020302
- 000000
トーン
- 535F56
- 58625B
- 5D665F
- 626A64
- 676D69
- 6C716D
- 717572
- 767877
- 7B7C7B
カラーハーモニー
補色 +180°
- 4E5B52
Forrester
- 5F535C
≈ Pinot Noir
類似色 -30° +30°
- 4E5B52
Forrester
- 545A4C
≈ Sherwood Forest
- 4A5B59
≈ Silken Pine
トライアド +120° +240°
- 4E5B52
Forrester
- 535664
≈ Blackwater
- 63534F
≈ Wenge
スプリットコンプリメンタリー +150° +210°
- 4E5B52
Forrester
- 5A5461
≈ Black Dragon’s Cauldron
- 625255
≈ Pinot Noir
テトラード +90° +180° +270°
- 4E5B52
Forrester
- 4D5963
≈ Fiord
- 5F535C
≈ Pinot Noir
- 60554B
≈ Beaver Pelt
コントラストとアクセシビリティ
Ag
AAA白の上
WCAG 7.13:1 · APCA Lc 85
Ag
Fail黒の上
WCAG 2.94:1 · APCA Lc 17
最適な文字色: #FFFFFF
WCAG 7.13:1 (AAA) · APCA Lc 85
Contrast pairs
コードスニペット
CSS
:root {
--forrester: #4e5b52;
--forrester-rgb: 78 91 82;
--forrester-oklch: oklch(0.457 0.022 155.2);
}
.element {
color: var(--forrester);
background-color: hsl(138 8% 33%);
border-color: oklch(0.457 0.022 155.2);
}Tailwind CSS v4
@theme {
--color-forrester: #4e5b52;
--color-forrester-50: #f0f7f3;
--color-forrester-100: #e2eae5;
--color-forrester-200: #cdd7d1;
--color-forrester-300: #afbbb3;
--color-forrester-400: #95a299;
--color-forrester-500: #7b8b80;
--color-forrester-600: #68756c;
--color-forrester-700: #535e57;
--color-forrester-800: #3d453f;
--color-forrester-900: #2a2f2b;
--color-forrester-950: #171c19;
}SCSS
$forrester: #4e5b52;
$forrester-rgb: 78, 91, 82;
$forrester-light: mix(#fff, $forrester, 20%);
$forrester-dark: mix(#000, $forrester, 20%);
.element {
color: $forrester;
box-shadow: 0 0 0 2px rgba($forrester, 0.35);
}