色名 · #AEC9EB
Tropical Blue
Tropical Blueは#AEC9EB：rgb(174 201 235)、hsl(213 60% 80%)、oklch(0.827 0.056 254.3)。ティント、シェード、ハーモニー、WCAG/APCAコントラスト、CSS・Tailwind v4・SCSSコードを確認できます。
What does Blue mean? → · Tropical Blue color name →
#AEC9EB
oklch(0.827 0.056 254.3)
カラー変換
- HEX
- #aec9eb
- RGB
- rgb(174 201 235)
- HSL
- hsl(213 60% 80%)
- HWB
- hwb(213 68% 8%)
- OKLCH
- oklch(0.827 0.056 254.3)
- OKLab
- oklab(0.827 -0.015 -0.054)
- CIE Lab
- lab(79.8 -3.77 -20.1)
- LCH
- lch(79.8 20.45 259.4)
- CMYK
- cmyk(26% 14% 0% 8%)
ティント · シェード · トーン
ティント
- B6CEED
- BED4EF
- C6D9F1
- CEDFF3
- D6E4F5
- DEE9F7
- E6EFF9
- EFF4FB
- F7FAFD
シェード
- 97AECC
- 8095AE
- 6A7C91
- 556475
- 414C5B
- 2E3641
- 1C2229
- 0B0F13
- 010203
トーン
- A9C1E0
- A5BAD5
- A0B3CA
- 9CABBF
- 97A4B4
- 929DAA
- 8E959F
- 898E95
- 85878A
カラーハーモニー
補色 +180°
- AEC9EB
Tropical Blue
- DDC29E
≈ Slender Reed
類似色 -30° +30°
- AEC9EB
Tropical Blue
- 9FCFE2
≈ Light Sky Babe
- C1C2EA
≈ Violet Gems
トライアド +120° +240°
- AEC9EB
Tropical Blue
- E9B8BB
≈ Peppermint Stick
- B8CFAA
≈ Pixie Green
スプリットコンプリメンタリー +150° +210°
- AEC9EB
Tropical Blue
- E7BCA9
≈ Orangery
- CCC99F
≈ Shagreen
テトラード +90° +180° +270°
- AEC9EB
Tropical Blue
- E2B8CF
≈ Eau de Rose
- DDC29E
≈ Slender Reed
- A5D3BD
≈ Flowering Cactus
コントラストとアクセシビリティ
Ag
Fail白の上
WCAG 1.69:1 · APCA Lc 30
Ag
AAA黒の上
WCAG 12.35:1 · APCA Lc 72
最適な文字色: #000000
WCAG 12.35:1 (AAA) · APCA Lc 72
Contrast pairs
コードスニペット
CSS
:root {
--tropical-blue: #aec9eb;
--tropical-blue-rgb: 174 201 235;
--tropical-blue-oklch: oklch(0.827 0.056 254.3);
}
.element {
color: var(--tropical-blue);
background-color: hsl(213 60% 80%);
border-color: oklch(0.827 0.056 254.3);
}Tailwind CSS v4
@theme {
--color-tropical-blue: #aec9eb;
--color-tropical-blue-50: #ebf6ff;
--color-tropical-blue-100: #dce9fb;
--color-tropical-blue-200: #c5d6ed;
--color-tropical-blue-300: #a5b9d5;
--color-tropical-blue-400: #88a1c0;
--color-tropical-blue-500: #6d88ab;
--color-tropical-blue-600: #5c7391;
--color-tropical-blue-700: #4a5c74;
--color-tropical-blue-800: #344456;
--color-tropical-blue-900: #242f3c;
--color-tropical-blue-950: #121b25;
}SCSS
$tropical-blue: #aec9eb;
$tropical-blue-rgb: 174, 201, 235;
$tropical-blue-light: mix(#fff, $tropical-blue, 20%);
$tropical-blue-dark: mix(#000, $tropical-blue, 20%);
.element {
color: $tropical-blue;
box-shadow: 0 0 0 2px rgba($tropical-blue, 0.35);
}