最も近い色名 · #62A987
#62A987
最も近い色名: Lily Pads
#62A987（rgb(98 169 135)、hsl(151 29% 52%)、oklch(0.678 0.089 162)）に最も近い色名はLily Padsです。ティント、シェード、ハーモニー、WCAG/APCAコントラスト、CSS・Tailwind v4・SCSSコードを確認できます。
#62A987
oklch(0.678 0.089 162)
カラー変換
- HEX
- #62a987
- RGB
- rgb(98 169 135)
- HSL
- hsl(151 29% 52%)
- HWB
- hwb(151 38% 34%)
- OKLCH
- oklch(0.678 0.089 162)
- OKLab
- oklab(0.678 -0.084 0.027)
- CIE Lab
- lab(63.86 -29.39 10.3)
- LCH
- lch(63.86 31.14 160.7)
- CMYK
- cmyk(42% 0% 20% 34%)
ティント · シェード · トーン
ティント
- 73B292
- 83BA9E
- 92C3AA
- A2CBB6
- B2D4C1
- C1DCCE
- D0E5DA
- E0EEE6
- EFF6F2
シェード
- 549275
- 477C63
- 3A6751
- 2D5341
- 213F31
- 162C21
- 0B1B13
- 030A06
- 000101
トーン
- 66A586
- 6AA186
- 6E9D85
- 719984
- 749584
- 779183
- 7A8C82
- 7C8882
- 7E8481
カラーハーモニー
補色 +180°
- 62A987
Lily Pads
- BE82A7
≈ Opera Mauve
類似色 -30° +30°
- 62A987
Lily Pads
- 83A46A
≈ Pickle
- 4BA9A6
≈ Emerald Succulent
トライアド +120° +240°
- 62A987
Lily Pads
- 8F91CD
≈ Adora
- C7856C
≈ Secluded Canyon
スプリットコンプリメンタリー +150° +210°
- 62A987
Lily Pads
- AA88C0
≈ Classic Bouquet
- C88189
≈ Fake Crush
テトラード +90° +180° +270°
- 62A987
Lily Pads
- 6F9BCD
≈ Ice Blue
- BE82A7
≈ Opera Mauve
- BA8F58
≈ Summer Weasel
コントラストとアクセシビリティ
Ag
Fail白の上
WCAG 2.78:1 · APCA Lc 54
Ag
AAA黒の上
WCAG 7.54:1 · APCA Lc 48
最適な文字色: #000000
WCAG 7.54:1 (AAA) · APCA Lc 48
Contrast pairs
コードスニペット
CSS
:root {
--lily-pads: #62a987;
--lily-pads-rgb: 98 169 135;
--lily-pads-oklch: oklch(0.678 0.089 162);
}
.element {
color: var(--lily-pads);
background-color: hsl(151 29% 52%);
border-color: oklch(0.678 0.089 162);
}Tailwind CSS v4
@theme {
--color-lily-pads: #62a987;
--color-lily-pads-50: #dffeee;
--color-lily-pads-100: #cef2e0;
--color-lily-pads-200: #b2e1ca;
--color-lily-pads-300: #8dc6ab;
--color-lily-pads-400: #6caf8e;
--color-lily-pads-500: #489874;
--color-lily-pads-600: #3e8162;
--color-lily-pads-700: #31674f;
--color-lily-pads-800: #244c38;
--color-lily-pads-900: #183526;
--color-lily-pads-950: #082014;
}SCSS
$lily-pads: #62a987;
$lily-pads-rgb: 98, 169, 135;
$lily-pads-light: mix(#fff, $lily-pads, 20%);
$lily-pads-dark: mix(#000, $lily-pads, 20%);
.element {
color: $lily-pads;
box-shadow: 0 0 0 2px rgba($lily-pads, 0.35);
}