色名 · #5FD1BA
Sweet Garden
Sweet Gardenは#5FD1BA：rgb(95 209 186)、hsl(168 55% 60%)、oklch(0.788 0.11 178.1)。ティント、シェード、ハーモニー、WCAG/APCAコントラスト、CSS・Tailwind v4・SCSSコードを確認できます。
What does Teal mean? → · Sweet Garden color name →
#5FD1BA
oklch(0.788 0.11 178.1)
カラー変換
- HEX
- #5fd1ba
- RGB
- rgb(95 209 186)
- HSL
- hsl(168 55% 60%)
- HWB
- hwb(168 37% 18%)
- OKLCH
- oklch(0.788 0.11 178.1)
- OKLab
- oklab(0.788 -0.11 0.004)
- CIE Lab
- lab(76.82 -38.16 1.09)
- LCH
- lch(76.82 38.17 178.4)
- CMYK
- cmyk(55% 0% 11% 18%)
ティント · シェード · トーン
ティント
- 73D6C1
- 85DBC7
- 96DFCE
- A6E4D5
- B6E9DC
- C5EDE3
- D4F2EA
- E2F6F1
- F1FBF8
シェード
- 52B5A1
- 449B89
- 388172
- 2C685C
- 205046
- 153932
- 0A231E
- 03100D
- 000202
トーン
- 66C9B4
- 6CC1AE
- 70B8A8
- 74B0A2
- 78A89D
- 7AA097
- 7C9891
- 7E908B
- 7F8886
カラーハーモニー
補色 +180°
- 5FD1BA
Sweet Garden
- F39CB9
≈ Harmonious Rose
類似色 -30° +30°
- 5FD1BA
Sweet Garden
- 88CE92
≈ Greek Garden
- 54CDDF
≈ Watercourse
トライアド +120° +240°
- 5FD1BA
Sweet Garden
- C2ABF7
≈ Purple Hepatica
- EFA871
≈ Apricot Jam
スプリットコンプリメンタリー +150° +210°
- 5FD1BA
Sweet Garden
- E0A1DE
≈ Plum Juice
- F89E92
≈ Peach Amber
テトラード +90° +180° +270°
- 5FD1BA
Sweet Garden
- 9DB8FF
≈ Truesky Gloxym
- F39CB9
≈ Harmonious Rose
- D7B663
≈ Strike It Rich
コントラストとアクセシビリティ
Ag
Fail白の上
WCAG 1.85:1 · APCA Lc 35
Ag
AAA黒の上
WCAG 11.31:1 · APCA Lc 68
最適な文字色: #000000
WCAG 11.31:1 (AAA) · APCA Lc 68
Contrast pairs
コードスニペット
CSS
:root {
--sweet-garden: #5fd1ba;
--sweet-garden-rgb: 95 209 186;
--sweet-garden-oklch: oklch(0.788 0.11 178.1);
}
.element {
color: var(--sweet-garden);
background-color: hsl(168 55% 60%);
border-color: oklch(0.788 0.11 178.1);
}Tailwind CSS v4
@theme {
--color-sweet-garden: #5fd1ba;
--color-sweet-garden-50: #d4fff6;
--color-sweet-garden-100: #c1f5e9;
--color-sweet-garden-200: #a0e4d6;
--color-sweet-garden-300: #74cab9;
--color-sweet-garden-400: #47b49e;
--color-sweet-garden-500: #009d86;
--color-sweet-garden-600: #008572;
--color-sweet-garden-700: #006a5b;
--color-sweet-garden-800: #004e41;
--color-sweet-garden-900: #02372d;
--color-sweet-garden-950: #00211a;
}SCSS
$sweet-garden: #5fd1ba;
$sweet-garden-rgb: 95, 209, 186;
$sweet-garden-light: mix(#fff, $sweet-garden, 20%);
$sweet-garden-dark: mix(#000, $sweet-garden, 20%);
.element {
color: $sweet-garden;
box-shadow: 0 0 0 2px rgba($sweet-garden, 0.35);
}