色名 · #ABD1AF
Coral Springs
Coral Springsは#ABD1AF：rgb(171 209 175)、hsl(126 29% 75%)、oklch(0.824 0.062 147.9)。ティント、シェード、ハーモニー、WCAG/APCAコントラスト、CSS・Tailwind v4・SCSSコードを確認できます。
What does Green mean? → · Coral Springs color name →
#ABD1AF
oklch(0.824 0.062 147.9)
カラー変換
- HEX
- #abd1af
- RGB
- rgb(171 209 175)
- HSL
- hsl(126 29% 75%)
- HWB
- hwb(126 67% 18%)
- OKLCH
- oklch(0.824 0.062 147.9)
- OKLab
- oklab(0.824 -0.053 0.033)
- CIE Lab
- lab(80.39 -17.97 12.59)
- LCH
- lch(80.39 21.94 145)
- CMYK
- cmyk(18% 0% 16% 18%)
ティント · シェード · トーン
ティント
- B3D6B7
- BCDABF
- C4DFC7
- CCE3CF
- D5E8D7
- DDEDDF
- E6F1E7
- EEF6EF
- F7FAF7
シェード
- 94B598
- 7E9B81
- 68816B
- 546856
- 405041
- 2D392E
- 1B231C
- 0B100B
- 010201
トーン
- A7C9AA
- A3C0A6
- 9EB8A1
- 9AB09C
- 96A897
- 91A093
- 8D988E
- 899089
- 848885
カラーハーモニー
補色 +180°
- ABD1AF
Coral Springs
- DCB8DA
≈ French Lilac
類似色 -30° +30°
- ABD1AF
Coral Springs
- C1CB9E
≈ Seedling
- 9AD3C5
≈ Aqua Glow
トライアド +120° +240°
- ABD1AF
Coral Springs
- B4C5EF
≈ Larkspur Bud
- EBB7AF
≈ Pensive Pink
スプリットコンプリメンタリー +150° +210°
- ABD1AF
Coral Springs
- CABDE9
≈ Drifting Dream
- E8B5C5
≈ Athena Pink
テトラード +90° +180° +270°
- ABD1AF
Coral Springs
- A0CCE9
≈ Endless Blue
- DCB8DA
≈ French Lilac
- E5BC9E
≈ Mollusca
コントラストとアクセシビリティ
Ag
Fail白の上
WCAG 1.68:1 · APCA Lc 30
Ag
AAA黒の上
WCAG 12.47:1 · APCA Lc 73
最適な文字色: #000000
WCAG 12.47:1 (AAA) · APCA Lc 73
Contrast pairs
コードスニペット
CSS
:root {
--coral-springs: #abd1af;
--coral-springs-rgb: 171 209 175;
--coral-springs-oklch: oklch(0.824 0.062 147.9);
}
.element {
color: var(--coral-springs);
background-color: hsl(126 29% 75%);
border-color: oklch(0.824 0.062 147.9);
}Tailwind CSS v4
@theme {
--color-coral-springs: #abd1af;
--color-coral-springs-50: #e9fbec;
--color-coral-springs-100: #daeedd;
--color-coral-springs-200: #c2dcc6;
--color-coral-springs-300: #a2c1a7;
--color-coral-springs-400: #86a98a;
--color-coral-springs-500: #6a926f;
--color-coral-springs-600: #5a7b5e;
--color-coral-springs-700: #48634b;
--color-coral-springs-800: #354835;
--color-coral-springs-900: #243224;
--color-coral-springs-950: #131e13;
}SCSS
$coral-springs: #abd1af;
$coral-springs-rgb: 171, 209, 175;
$coral-springs-light: mix(#fff, $coral-springs, 20%);
$coral-springs-dark: mix(#000, $coral-springs, 20%);
.element {
color: $coral-springs;
box-shadow: 0 0 0 2px rgba($coral-springs, 0.35);
}