色名 · #9CD4CF
Fountain City
Fountain Cityは#9CD4CF：rgb(156 212 207)、hsl(175 39% 72%)、oklch(0.83 0.058 189.2)。ティント、シェード、ハーモニー、WCAG/APCAコントラスト、CSS・Tailwind v4・SCSSコードを確認できます。
What does Teal mean? → · Fountain City color name →
#9CD4CF
oklch(0.83 0.058 189.2)
カラー変換
- HEX
- #9cd4cf
- RGB
- rgb(156 212 207)
- HSL
- hsl(175 39% 72%)
- HWB
- hwb(175 61% 17%)
- OKLCH
- oklch(0.83 0.058 189.2)
- OKLab
- oklab(0.83 -0.057 -0.009)
- CIE Lab
- lab(80.95 -19.48 -3.67)
- LCH
- lch(80.95 19.82 190.7)
- CMYK
- cmyk(26% 0% 2% 17%)
ティント · シェード · トーン
ティント
- A6D8D4
- B0DDD8
- BAE1DD
- C4E5E2
- CEEAE7
- D8EEEC
- E2F2F0
- ECF6F5
- F5FBFA
シェード
- 87B8B4
- 739D99
- 5F837F
- 4C6967
- 39514F
- 283A38
- 182423
- 091010
- 010202
トーン
- 9ACBC7
- 97C3BF
- 95BAB7
- 92B2AF
- 8FA9A7
- 8CA19F
- 899997
- 86908F
- 838888
カラーハーモニー
補色 +180°
- 9CD4CF
Fountain City
- EAB8BF
≈ Peppermint Stick
類似色 -30° +30°
- 9CD4CF
Fountain City
- A8D3BA
≈ Glenwood Green
- 9DD1E1
≈ Light Delphin
トライアド +120° +240°
- 9CD4CF
Fountain City
- D2BEE4
≈ York Plum
- E1C19F
≈ Tostada
スプリットコンプリメンタリー +150° +210°
- 9CD4CF
Fountain City
- E2B9D4
≈ Designer Pink
- EABBAC
≈ Spicy Hummus
テトラード +90° +180° +270°
- 9CD4CF
Fountain City
- BFC4ED
≈ Vodka
- EAB8BF
≈ Peppermint Stick
- D0C99E
≈ Anjou Pear
コントラストとアクセシビリティ
Ag
Fail白の上
WCAG 1.64:1 · APCA Lc 29
Ag
AAA黒の上
WCAG 12.73:1 · APCA Lc 74
最適な文字色: #000000
WCAG 12.73:1 (AAA) · APCA Lc 74
Contrast pairs
コードスニペット
CSS
:root {
--fountain-city: #9cd4cf;
--fountain-city-rgb: 156 212 207;
--fountain-city-oklch: oklch(0.83 0.058 189.2);
}
.element {
color: var(--fountain-city);
background-color: hsl(175 39% 72%);
border-color: oklch(0.83 0.058 189.2);
}Tailwind CSS v4
@theme {
--color-fountain-city: #9cd4cf;
--color-fountain-city-50: #e3fbf9;
--color-fountain-city-100: #d3eeec;
--color-fountain-city-200: #b9ddda;
--color-fountain-city-300: #96c1be;
--color-fountain-city-400: #76aaa5;
--color-fountain-city-500: #56938e;
--color-fountain-city-600: #4a7c78;
--color-fountain-city-700: #3b6360;
--color-fountain-city-800: #2a4946;
--color-fountain-city-900: #1c3330;
--color-fountain-city-950: #0c1e1c;
}SCSS
$fountain-city: #9cd4cf;
$fountain-city-rgb: 156, 212, 207;
$fountain-city-light: mix(#fff, $fountain-city, 20%);
$fountain-city-dark: mix(#000, $fountain-city, 20%);
.element {
color: $fountain-city;
box-shadow: 0 0 0 2px rgba($fountain-city, 0.35);
}