色名 · #8AADCF
Mini Bay
Mini Bayは#8AADCF：rgb(138 173 207)、hsl(210 42% 68%)、oklch(0.734 0.063 247.9)。ティント、シェード、ハーモニー、WCAG/APCAコントラスト、CSS・Tailwind v4・SCSSコードを確認できます。
What does Blue mean? → · Mini Bay color name →
#8AADCF
oklch(0.734 0.063 247.9)
カラー変換
- HEX
- #8aadcf
- RGB
- rgb(138 173 207)
- HSL
- hsl(210 42% 68%)
- HWB
- hwb(210 54% 19%)
- OKLCH
- oklch(0.734 0.063 247.9)
- OKLab
- oklab(0.734 -0.024 -0.058)
- CIE Lab
- lab(69.04 -6.16 -21.46)
- LCH
- lch(69.04 22.32 254)
- CMYK
- cmyk(33% 16% 0% 19%)
ティント · シェード · トーン
ティント
- 95B5D4
- A1BDD9
- ACC5DE
- B8CDE3
- C4D6E7
- CFDEEC
- DBE6F1
- E7EEF6
- F3F7FA
シェード
- 7796B4
- 657F99
- 536A7F
- 425567
- 32414F
- 222D38
- 141B23
- 070B10
- 010102
トーン
- 89A8C7
- 88A4BF
- 889FB7
- 879BAF
- 8696A7
- 85929F
- 848D97
- 828990
- 818488
カラーハーモニー
補色 +180°
- 8AADCF
Mini Bay
- C4A27F
≈ Almandine
類似色 -30° +30°
- 8AADCF
Mini Bay
- 7BB3C3
≈ Heavenly
- 9FA6D1
≈ Venus Flower
トライアド +120° +240°
- 8AADCF
Mini Bay
- CD99A1
≈ Cooing Doves
- 9DB187
≈ Easy Green
スプリットコンプリメンタリー +150° +210°
- 8AADCF
Mini Bay
- CD9C8D
≈ Artefact
- B3AA7C
≈ Even Growth
テトラード +90° +180° +270°
コントラストとアクセシビリティ
Ag
Fail白の上
WCAG 2.34:1 · APCA Lc 46
Ag
AAA黒の上
WCAG 8.95:1 · APCA Lc 56
最適な文字色: #000000
WCAG 8.95:1 (AAA) · APCA Lc 56
Contrast pairs
コードスニペット
CSS
:root {
--mini-bay: #8aadcf;
--mini-bay-rgb: 138 173 207;
--mini-bay-oklch: oklch(0.734 0.063 247.9);
}
.element {
color: var(--mini-bay);
background-color: hsl(210 42% 68%);
border-color: oklch(0.734 0.063 247.9);
}Tailwind CSS v4
@theme {
--color-mini-bay: #8aadcf;
--color-mini-bay-50: #e8f7ff;
--color-mini-bay-100: #d9eafd;
--color-mini-bay-200: #c1d7ef;
--color-mini-bay-300: #a0bbd7;
--color-mini-bay-400: #81a2c2;
--color-mini-bay-500: #658aae;
--color-mini-bay-600: #567593;
--color-mini-bay-700: #445e76;
--color-mini-bay-800: #304557;
--color-mini-bay-900: #21303d;
--color-mini-bay-950: #101c26;
}SCSS
$mini-bay: #8aadcf;
$mini-bay-rgb: 138, 173, 207;
$mini-bay-light: mix(#fff, $mini-bay, 20%);
$mini-bay-dark: mix(#000, $mini-bay, 20%);
.element {
color: $mini-bay;
box-shadow: 0 0 0 2px rgba($mini-bay, 0.35);
}