色名 · #7ED0B7
Lavish Green
Lavish Greenは#7ED0B7：rgb(126 208 183)、hsl(162 47% 65%)、oklch(0.798 0.089 172.5)。ティント、シェード、ハーモニー、WCAG/APCAコントラスト、CSS・Tailwind v4・SCSSコードを確認できます。
What does Teal mean? → · Lavish Green color name →
#7ED0B7
oklch(0.798 0.089 172.5)
カラー変換
- HEX
- #7ed0b7
- RGB
- rgb(126 208 183)
- HSL
- hsl(162 47% 65%)
- HWB
- hwb(162 49% 18%)
- OKLCH
- oklch(0.798 0.089 172.5)
- OKLab
- oklab(0.798 -0.088 0.012)
- CIE Lab
- lab(77.72 -30.53 4.17)
- LCH
- lch(77.72 30.82 172.2)
- CMYK
- cmyk(39% 0% 12% 18%)
ティント · シェード · トーン
ティント
- 8CD5BE
- 9ADAC5
- A7DECC
- B4E3D3
- C1E8DA
- CEECE2
- DAF1E9
- E6F6F0
- F3FAF8
シェード
- 6DB59F
- 5C9A87
- 4C8070
- 3C675A
- 2D4F45
- 1F3931
- 11231E
- 05100C
- 010202
トーン
- 80C8B1
- 81C0AC
- 82B8A6
- 82AFA1
- 82A79B
- 82A096
- 829890
- 82908B
- 818885
カラーハーモニー
補色 +180°
- 7ED0B7
Lavish Green
- EAA6C2
≈ Hushed Rose
類似色 -30° +30°
- 7ED0B7
Lavish Green
- 9CCC98
≈ Kettle Drum
- 72CED6
≈ Summer of ’82
トライアド +120° +240°
- 7ED0B7
Lavish Green
- BEB3F2
≈ Purple Sand
- EBAD88
≈ Coral Dust
スプリットコンプリメンタリー +150° +210°
- 7ED0B7
Lavish Green
- D9AADF
≈ Barely Bloomed
- F1A7A3
≈ Calabrese
テトラード +90° +180° +270°
- 7ED0B7
Lavish Green
- 9FBDF7
≈ Pastel Blue
- EAA6C2
≈ Hushed Rose
- D9B87A
≈ Sinking Sand
コントラストとアクセシビリティ
Ag
Fail白の上
WCAG 1.81:1 · APCA Lc 34
Ag
AAA黒の上
WCAG 11.59:1 · APCA Lc 69
最適な文字色: #000000
WCAG 11.59:1 (AAA) · APCA Lc 69
Contrast pairs
コードスニペット
CSS
:root {
--lavish-green: #7ed0b7;
--lavish-green-rgb: 126 208 183;
--lavish-green-oklch: oklch(0.798 0.089 172.5);
}
.element {
color: var(--lavish-green);
background-color: hsl(162 47% 65%);
border-color: oklch(0.798 0.089 172.5);
}Tailwind CSS v4
@theme {
--color-lavish-green: #7ed0b7;
--color-lavish-green-50: #dcfef3;
--color-lavish-green-100: #caf2e6;
--color-lavish-green-200: #ade1d2;
--color-lavish-green-300: #86c7b4;
--color-lavish-green-400: #63b099;
--color-lavish-green-500: #3a9980;
--color-lavish-green-600: #33816c;
--color-lavish-green-700: #286857;
--color-lavish-green-800: #1d4c3e;
--color-lavish-green-900: #13352b;
--color-lavish-green-950: #042018;
}SCSS
$lavish-green: #7ed0b7;
$lavish-green-rgb: 126, 208, 183;
$lavish-green-light: mix(#fff, $lavish-green, 20%);
$lavish-green-dark: mix(#000, $lavish-green, 20%);
.element {
color: $lavish-green;
box-shadow: 0 0 0 2px rgba($lavish-green, 0.35);
}