色名 · #81A79E
Scenario
Scenarioは#81A79E：rgb(129 167 158)、hsl(166 18% 58%)、oklch(0.698 0.043 178.8)。ティント、シェード、ハーモニー、WCAG/APCAコントラスト、CSS・Tailwind v4・SCSSコードを確認できます。
What does Teal mean? → · Scenario color name →
#81A79E
oklch(0.698 0.043 178.8)
カラー変換
- HEX
- #81a79e
- RGB
- rgb(129 167 158)
- HSL
- hsl(166 18% 58%)
- HWB
- hwb(166 51% 35%)
- OKLCH
- oklch(0.698 0.043 178.8)
- OKLab
- oklab(0.698 -0.043 0.001)
- CIE Lab
- lab(65.48 -14.89 0.2)
- LCH
- lch(65.48 14.89 179.2)
- CMYK
- cmyk(23% 0% 5% 35%)
ティント · シェード · トーン
ティント
- 8DB0A7
- 9AB8B1
- A6C1BA
- B3CAC4
- BFD2CD
- CCDBD7
- D8E4E1
- E5EDEB
- F2F6F5
シェード
- 6F9189
- 5E7B74
- 4E6660
- 3E524D
- 2E3E3A
- 1F2C29
- 121A18
- 060A09
- 010101
トーン
- 81A39B
- 819F98
- 819B95
- 819792
- 81938F
- 818F8C
- 818C89
- 818886
- 808483
カラーハーモニー
補色 +180°
- 81A79E
Scenario
- B5939D
≈ Ashberry
類似色 -30° +30°
- 81A79E
Scenario
- 8CA68F
≈ Envy
- 7FA6AC
≈ Ziggurat
トライアド +120° +240°
- 81A79E
Scenario
- A198B6
≈ Heirloom Lilac
- B39883
≈ Butcher Paper
スプリットコンプリメンタリー +150° +210°
- 81A79E
Scenario
- AD94AB
≈ London Hue
- B7948E
≈ Cherry Taupe
テトラード +90° +180° +270°
- 81A79E
Scenario
- 929DBA
≈ Electric Sky
- B5939D
≈ Ashberry
- A99D7F
≈ Winter Sage
コントラストとアクセシビリティ
Ag
Fail白の上
WCAG 2.63:1 · APCA Lc 51
Ag
AAA黒の上
WCAG 7.95:1 · APCA Lc 50
最適な文字色: #000000
WCAG 7.95:1 (AAA) · APCA Lc 50
Contrast pairs
コードスニペット
CSS
:root {
--scenario: #81a79e;
--scenario-rgb: 129 167 158;
--scenario-oklch: oklch(0.698 0.043 178.8);
}
.element {
color: var(--scenario);
background-color: hsl(166 18% 58%);
border-color: oklch(0.698 0.043 178.8);
}Tailwind CSS v4
@theme {
--color-scenario: #81a79e;
--color-scenario-50: #e9f9f6;
--color-scenario-100: #d9ede8;
--color-scenario-200: #c1dbd5;
--color-scenario-300: #a0bfb8;
--color-scenario-400: #83a79f;
--color-scenario-500: #679086;
--color-scenario-600: #577a72;
--color-scenario-700: #46615b;
--color-scenario-800: #324742;
--color-scenario-900: #22322d;
--color-scenario-950: #111d1a;
}SCSS
$scenario: #81a79e;
$scenario-rgb: 129, 167, 158;
$scenario-light: mix(#fff, $scenario, 20%);
$scenario-dark: mix(#000, $scenario, 20%);
.element {
color: $scenario;
box-shadow: 0 0 0 2px rgba($scenario, 0.35);
}