最も近い色名 · #642CA5
#642CA5
最も近い色名: Royalty
#642CA5（rgb(100 44 165)、hsl(268 58% 41%)、oklch(0.438 0.182 299.9)）に最も近い色名はRoyaltyです。ティント、シェード、ハーモニー、WCAG/APCAコントラスト、CSS・Tailwind v4・SCSSコードを確認できます。
#642CA5
oklch(0.438 0.182 299.9)
カラー変換
- HEX
- #642ca5
- RGB
- rgb(100 44 165)
- HSL
- hsl(268 58% 41%)
- HWB
- hwb(268 17% 35%)
- OKLCH
- oklch(0.438 0.182 299.9)
- OKLab
- oklab(0.438 0.091 -0.158)
- CIE Lab
- lab(31.63 43.71 -56.2)
- LCH
- lch(31.63 71.2 307.9)
- CMYK
- cmyk(39% 73% 0% 35%)
ティント · シェード · トーン
ティント
- 7244AF
- 805AB9
- 8E6FC3
- 9D83CC
- AD98D5
- BDACDE
- CDC0E7
- DDD5EF
- EEEAF7
シェード
- 56258F
- 481E79
- 3B1765
- 2E1151
- 220A3D
- 16052B
- 0B021A
- 03010A
- 000001
トーン
- 6638A2
- 69429F
- 6B4B9C
- 6E5499
- 715C95
- 746492
- 776B8E
- 7A7289
- 7D7985
カラーハーモニー
補色 +180°
- 642CA5
Royalty
- 4B5A00
≈ Kyuri Green
類似色 -30° +30°
- 642CA5
Royalty
- 2F41B4
≈ Denim
- 841680
≈ Hello Darkness My Old Friend
トライアド +120° +240°
- 642CA5
Royalty
- 7A4200
≈ Dusky Brown
- 006054
≈ Alpine Green
スプリットコンプリメンタリー +150° +210°
- 642CA5
Royalty
- 654F00
≈ Olive Brown
- 00642A
≈ Woodland Wonder
テトラード +90° +180° +270°
コントラストとアクセシビリティ
Ag
AAA白の上
WCAG 8.58:1 · APCA Lc 89
Ag
Fail黒の上
WCAG 2.44:1 · APCA Lc 13
最適な文字色: #FFFFFF
WCAG 8.58:1 (AAA) · APCA Lc 89
Contrast pairs
コードスニペット
CSS
:root {
--royalty: #642ca5;
--royalty-rgb: 100 44 165;
--royalty-oklch: oklch(0.438 0.182 299.9);
}
.element {
color: var(--royalty);
background-color: hsl(268 58% 41%);
border-color: oklch(0.438 0.182 299.9);
}Tailwind CSS v4
@theme {
--color-royalty: #642ca5;
--color-royalty-50: #feeaff;
--color-royalty-100: #f3daff;
--color-royalty-200: #e2c2ff;
--color-royalty-300: #c9a0ff;
--color-royalty-400: #b081f9;
--color-royalty-500: #9b61eb;
--color-royalty-600: #8353c6;
--color-royalty-700: #69429f;
--color-royalty-800: #4b3078;
--color-royalty-900: #342155;
--color-royalty-950: #200f39;
}SCSS
$royalty: #642ca5;
$royalty-rgb: 100, 44, 165;
$royalty-light: mix(#fff, $royalty, 20%);
$royalty-dark: mix(#000, $royalty, 20%);
.element {
color: $royalty;
box-shadow: 0 0 0 2px rgba($royalty, 0.35);
}