色名 · #8ECFD0
Fling Green
Fling Greenは#8ECFD0：rgb(142 207 208)、hsl(181 41% 69%)、oklch(0.811 0.066 197.2)。ティント、シェード、ハーモニー、WCAG/APCAコントラスト、CSS・Tailwind v4・SCSSコードを確認できます。
What does Teal mean? → · Fling Green color name →
#8ECFD0
oklch(0.811 0.066 197.2)
カラー変換
- HEX
- #8ecfd0
- RGB
- rgb(142 207 208)
- HSL
- hsl(181 41% 69%)
- HWB
- hwb(181 56% 18%)
- OKLCH
- oklch(0.811 0.066 197.2)
- OKLab
- oklab(0.811 -0.063 -0.019)
- CIE Lab
- lab(78.79 -21.2 -7.46)
- LCH
- lch(78.79 22.47 199.4)
- CMYK
- cmyk(32% 0% 0% 18%)
ティント · シェード · トーン
ティント
- 9AD4D5
- A6D9D9
- B1DDDE
- BCE2E3
- C8E7E7
- D3ECEC
- DEF1F1
- E9F5F5
- F4FAFA
シェード
- 7BB4B5
- 68999A
- 567F80
- 446767
- 344F4F
- 243839
- 152323
- 071010
- 010202
トーン
- 8DC7C8
- 8DBFBF
- 8CB7B7
- 8AAFAF
- 89A7A7
- 889F9F
- 869797
- 848F8F
- 828888
カラーハーモニー
補色 +180°
- 8ECFD0
Fling Green
- E9B1B2
≈ Strawberry Yoghurt
類似色 -30° +30°
- 8ECFD0
Fling Green
- 98D0B9
≈ Mint Ice Cream
- 94CBE3
≈ Medical Mask
トライアド +120° +240°
- 8ECFD0
Fling Green
- D3B5DE
≈ Pretty Petunia
- DABC92
≈ Blonde
スプリットコンプリメンタリー +150° +210°
- 8ECFD0
Fling Green
- E2B1C9
≈ Muddy Mauve
- E6B59D
≈ Black-Eyed Peach
テトラード +90° +180° +270°
- 8ECFD0
Fling Green
- BEBBEA
≈ Pretty Posie
- E9B1B2
≈ Strawberry Yoghurt
- C6C594
≈ Yerba Mate
コントラストとアクセシビリティ
Ag
Fail白の上
WCAG 1.75:1 · APCA Lc 32
Ag
AAA黒の上
WCAG 11.98:1 · APCA Lc 71
最適な文字色: #000000
WCAG 11.98:1 (AAA) · APCA Lc 71
Contrast pairs
コードスニペット
CSS
:root {
--fling-green: #8ecfd0;
--fling-green-rgb: 142 207 208;
--fling-green-oklch: oklch(0.811 0.066 197.2);
}
.element {
color: var(--fling-green);
background-color: hsl(181 41% 69%);
border-color: oklch(0.811 0.066 197.2);
}Tailwind CSS v4
@theme {
--color-fling-green: #8ecfd0;
--color-fling-green-50: #e0fbfc;
--color-fling-green-100: #d0eff0;
--color-fling-green-200: #b4dddf;
--color-fling-green-300: #90c2c4;
--color-fling-green-400: #6eabac;
--color-fling-green-500: #4c9495;
--color-fling-green-600: #417d7e;
--color-fling-green-700: #346465;
--color-fling-green-800: #244a49;
--color-fling-green-900: #183333;
--color-fling-green-950: #081f1f;
}SCSS
$fling-green: #8ecfd0;
$fling-green-rgb: 142, 207, 208;
$fling-green-light: mix(#fff, $fling-green, 20%);
$fling-green-dark: mix(#000, $fling-green, 20%);
.element {
color: $fling-green;
box-shadow: 0 0 0 2px rgba($fling-green, 0.35);
}