色名 · #7CAACF
Calm Day
Calm Dayは#7CAACF：rgb(124 170 207)、hsl(207 46% 65%)、oklch(0.719 0.073 243.3)。ティント、シェード、ハーモニー、WCAG/APCAコントラスト、CSS・Tailwind v4・SCSSコードを確認できます。
What does Blue mean? → · Calm Day color name →
#7CAACF
oklch(0.719 0.073 243.3)
カラー変換
- HEX
- #7caacf
- RGB
- rgb(124 170 207)
- HSL
- hsl(207 46% 65%)
- HWB
- hwb(207 49% 19%)
- OKLCH
- oklch(0.719 0.073 243.3)
- OKLab
- oklab(0.719 -0.033 -0.065)
- CIE Lab
- lab(67.34 -8.79 -24.12)
- LCH
- lch(67.34 25.67 250)
- CMYK
- cmyk(40% 18% 0% 19%)
ティント · シェード · トーン
ティント
- 89B2D4
- 96BBD9
- A3C3DE
- B0CCE3
- BDD4E7
- CADDEC
- D7E5F1
- E4EEF6
- F2F6FA
シェード
- 6B93B4
- 5A7D99
- 4A687F
- 3B5367
- 2C3F4F
- 1E2D38
- 111B23
- 050B10
- 010102
トーン
- 7DA6C7
- 7EA2BF
- 7E9DB7
- 7F99AF
- 7F95A7
- 80919F
- 808D97
- 808890
- 808488
カラーハーモニー
補色 +180°
- 7CAACF
Calm Day
- C59B74
≈ Chimaera Brown
類似色 -30° +30°
- 7CAACF
Calm Day
- 6BB1C0
≈ Water Music
- 95A2D3
≈ Fields of Heather
トライアド +120° +240°
- 7CAACF
Calm Day
- CC919F
≈ Rosetti
- 9BAC79
≈ Siamese Green
スプリットコンプリメンタリー +150° +210°
- 7CAACF
Calm Day
- CE9487
≈ Peach Beige
- B4A46F
≈ Crack Willow
テトラード +90° +180° +270°
- 7CAACF
Calm Day
- C193B8
≈ Mauve Magic
- C59B74
≈ Chimaera Brown
- 81B28F
≈ Padua
コントラストとアクセシビリティ
Ag
Fail白の上
WCAG 2.46:1 · APCA Lc 48
Ag
AAA黒の上
WCAG 8.50:1 · APCA Lc 54
最適な文字色: #000000
WCAG 8.50:1 (AAA) · APCA Lc 54
Contrast pairs
コードスニペット
CSS
:root {
--calm-day: #7caacf;
--calm-day-rgb: 124 170 207;
--calm-day-oklch: oklch(0.719 0.073 243.3);
}
.element {
color: var(--calm-day);
background-color: hsl(207 46% 65%);
border-color: oklch(0.719 0.073 243.3);
}Tailwind CSS v4
@theme {
--color-calm-day: #7caacf;
--color-calm-day-50: #e5f8ff;
--color-calm-day-100: #d4ebff;
--color-calm-day-200: #bbd8f2;
--color-calm-day-300: #99bcdb;
--color-calm-day-400: #79a4c7;
--color-calm-day-500: #5a8cb3;
--color-calm-day-600: #4d7697;
--color-calm-day-700: #3d5f79;
--color-calm-day-800: #2a465a;
--color-calm-day-900: #1c303f;
--color-calm-day-950: #0c1c28;
}SCSS
$calm-day: #7caacf;
$calm-day-rgb: 124, 170, 207;
$calm-day-light: mix(#fff, $calm-day, 20%);
$calm-day-dark: mix(#000, $calm-day, 20%);
.element {
color: $calm-day;
box-shadow: 0 0 0 2px rgba($calm-day, 0.35);
}