色名 · #1FAFB4
Mermaid Treasure
Mermaid Treasureは#1FAFB4：rgb(31 175 180)、hsl(182 71% 41%)、oklch(0.687 0.112 198.7)。ティント、シェード、ハーモニー、WCAG/APCAコントラスト、CSS・Tailwind v4・SCSSコードを確認できます。
What does Teal mean? → · Mermaid Treasure color name →
#1FAFB4
oklch(0.687 0.112 198.7)
カラー変換
- HEX
- #1fafb4
- RGB
- rgb(31 175 180)
- HSL
- hsl(182 71% 41%)
- HWB
- hwb(182 12% 29%)
- OKLCH
- oklch(0.687 0.112 198.7)
- OKLab
- oklab(0.687 -0.106 -0.036)
- CIE Lab
- lab(64.81 -35.38 -13.45)
- LCH
- lch(64.81 37.85 200.8)
- CMYK
- cmyk(83% 3% 0% 29%)
ティント · シェード · トーン
ティント
- 47B7BB
- 61BFC3
- 78C7CA
- 8DCFD2
- A1D7D9
- B4DFE1
- C7E7E8
- DAEFF0
- EDF7F7
シェード
- 19989C
- 148185
- 0F6B6E
- 0A5658
- 064144
- 032E30
- 011C1D
- 000B0C
- 000102
トーン
- 37AAAF
- 46A6A9
- 52A1A4
- 5B9D9F
- 63989A
- 6B9395
- 718F8F
- 768A8A
- 7B8585
カラーハーモニー
補色 +180°
- 1FAFB4
Mermaid Treasure
- D77D7F
≈ Babe
類似色 -30° +30°
- 1FAFB4
Mermaid Treasure
- 45B08E
≈ Walk in the Woods
- 40A7D1
≈ Mystic Blue
トライアド +120° +240°
- 1FAFB4
Mermaid Treasure
- B884C7
≈ Lavender Sweater
- C09242
≈ Yellow Ochre
スプリットコンプリメンタリー +150° +210°
- 1FAFB4
Mermaid Treasure
- CD7DA6
≈ Ice Plant
- D2845A
≈ Sunny Horizon
テトラード +90° +180° +270°
- 1FAFB4
Mermaid Treasure
- 988FDB
≈ Perrywinkle
- D77D7F
≈ Babe
- A0A047
≈ Poplar
コントラストとアクセシビリティ
Ag
Fail白の上
WCAG 2.67:1 · APCA Lc 52
Ag
AAA黒の上
WCAG 7.84:1 · APCA Lc 50
最適な文字色: #000000
WCAG 7.84:1 (AAA) · APCA Lc 50
Contrast pairs
コードスニペット
CSS
:root {
--mermaid-treasure: #1fafb4;
--mermaid-treasure-rgb: 31 175 180;
--mermaid-treasure-oklch: oklch(0.687 0.112 198.7);
}
.element {
color: var(--mermaid-treasure);
background-color: hsl(182 71% 41%);
border-color: oklch(0.687 0.112 198.7);
}Tailwind CSS v4
@theme {
--color-mermaid-treasure: #1fafb4;
--color-mermaid-treasure-50: #d1ffff;
--color-mermaid-treasure-100: #bdf4f7;
--color-mermaid-treasure-200: #9ae3e8;
--color-mermaid-treasure-300: #6bc9ce;
--color-mermaid-treasure-400: #35b2b7;
--color-mermaid-treasure-500: #009ca1;
--color-mermaid-treasure-600: #008488;
--color-mermaid-treasure-700: #00696d;
--color-mermaid-treasure-800: #004e4f;
--color-mermaid-treasure-900: #003637;
--color-mermaid-treasure-950: #002122;
}SCSS
$mermaid-treasure: #1fafb4;
$mermaid-treasure-rgb: 31, 175, 180;
$mermaid-treasure-light: mix(#fff, $mermaid-treasure, 20%);
$mermaid-treasure-dark: mix(#000, $mermaid-treasure, 20%);
.element {
color: $mermaid-treasure;
box-shadow: 0 0 0 2px rgba($mermaid-treasure, 0.35);
}