色名 · #004C71
Pompeii Blue
Pompeii Blueは#004C71：rgb(0 76 113)、hsl(200 100% 22%)、oklch(0.396 0.089 239)。ティント、シェード、ハーモニー、WCAG/APCAコントラスト、CSS・Tailwind v4・SCSSコードを確認できます。
What does Blue mean? → · Pompeii Blue color name →
#004C71
oklch(0.396 0.089 239)
カラー変換
- HEX
- #004c71
- RGB
- rgb(0 76 113)
- HSL
- hsl(200 100% 22%)
- HWB
- hwb(200 0% 56%)
- OKLCH
- oklch(0.396 0.089 239)
- OKLab
- oklab(0.396 -0.046 -0.076)
- CIE Lab
- lab(29.87 -9.46 -27.52)
- LCH
- lch(29.87 29.1 251)
- CMYK
- cmyk(100% 33% 0% 56%)
ティント · シェード · トーン
ティント
- 255D7F
- 3F6E8D
- 567F9B
- 6E91A9
- 85A2B7
- 9DB4C5
- B5C7D4
- CDD9E2
- E6ECF0
シェード
- 004161
- 003652
- 002C43
- 002235
- 001827
- 000F1A
- 00060E
- 000204
- 000001
トーン
- 185173
- 275775
- 345C76
- 406178
- 4B677A
- 566C7B
- 60717C
- 6B767E
- 767B7F
カラーハーモニー
補色 +180°
- 004C71
Pompeii Blue
- 693907
≈ Bestial Brown
類似色 -30° +30°
- 004C71
Pompeii Blue
- 00505A
≈ Kali Blue
- 334376
≈ Space Missions
トライアド +120° +240°
- 004C71
Pompeii Blue
- 6C3046
≈ Cherry Juice Red
- 424D06
≈ No Emissions Green
スプリットコンプリメンタリー +150° +210°
- 004C71
Pompeii Blue
- 6F312A
≈ Cypress Bark Red
- 584400
≈ Sugarloaf Brown
テトラード +90° +180° +270°
- 004C71
Pompeii Blue
- 60335E
≈ Long Passionate Night
- 693907
≈ Bestial Brown
- 1C542A
≈ Moor-Monster
コントラストとアクセシビリティ
Ag
AAA白の上
WCAG 9.24:1 · APCA Lc 91
Ag
Fail黒の上
WCAG 2.27:1 · APCA Lc 12
最適な文字色: #FFFFFF
WCAG 9.24:1 (AAA) · APCA Lc 91
Contrast pairs
コードスニペット
CSS
:root {
--pompeii-blue: #004c71;
--pompeii-blue-rgb: 0 76 113;
--pompeii-blue-oklch: oklch(0.396 0.089 239);
}
.element {
color: var(--pompeii-blue);
background-color: hsl(200 100% 22%);
border-color: oklch(0.396 0.089 239);
}Tailwind CSS v4
@theme {
--color-pompeii-blue: #004c71;
--color-pompeii-blue-50: #dff9ff;
--color-pompeii-blue-100: #ceecff;
--color-pompeii-blue-200: #b3daf7;
--color-pompeii-blue-300: #8ebee1;
--color-pompeii-blue-400: #6ba6ce;
--color-pompeii-blue-500: #488ebb;
--color-pompeii-blue-600: #3e789e;
--color-pompeii-blue-700: #31607f;
--color-pompeii-blue-800: #21475d;
--color-pompeii-blue-900: #163141;
--color-pompeii-blue-950: #071d2a;
}SCSS
$pompeii-blue: #004c71;
$pompeii-blue-rgb: 0, 76, 113;
$pompeii-blue-light: mix(#fff, $pompeii-blue, 20%);
$pompeii-blue-dark: mix(#000, $pompeii-blue, 20%);
.element {
color: $pompeii-blue;
box-shadow: 0 0 0 2px rgba($pompeii-blue, 0.35);
}