Pop up component design system
Pop up component design system has 6 colors, mostly blue. The lightest color is Maize (Crayola) (#E7C658), the darkest Deep Koamaru (#303568). Its strongest contrast pair is #303568 on #E7C658 (6.8:1, WCAG AA).
- Ultramarine Blue#466ef3
- Maize (Crayola)#e7c658
- Dark Cornflower Blue#1c3c94
- Dark Blue-Gray#5e62a0
- Light Periwinkle#bfc7db
- Deep Koamaru#303568
Created at 08/17/2022 09:27
The palette consists of Light, Semi dark colors. Accent colors Ultramarine Blue #466ef3 and Maize (Crayola) #e7c658. Palette has Cool, Warm colors temperature.
By lightness, this palette runs from #303568 (darkest) to #E7C658 (lightest). The lightness range is moderate.
Saturation is mixed — 2 muted and 3 vivid out of 6 colors.
Some colors sit roughly opposite each other on the color wheel, giving the palette complementary contrast.
Overall temperature among swatches leans cool (5 of 6).
HEX codes (sorted): #1C3C94, #303568, #466EF3, #5E62A0, #BFC7DB, #E7C658
Palette Pop up component design system combines 6 color codes:
HEX: #466ef3, RGB: (70, 110, 243); HEX: #e7c658, RGB: (231, 198, 88); HEX: #1c3c94, RGB: (28, 60, 148)
HEX: #5e62a0, RGB: (94, 98, 160); HEX: #bfc7db, RGB: (191, 199, 219); HEX: #303568, RGB: (48, 53, 104)
Simplified version of palette colors
Tint of Royal Blue, Shade of Gold, Shade of Dark Slate Blue, Shade of Slate Blue, Tint of Light Steel Blue, Shade of Dark Slate Blue
Color scheme was created by colorswall
Color codes in palette
Pop up component design system color codes HEX, RGB information in table
| Color | HEX | RGB | Name | Alternative name |
|---|---|---|---|---|
| #466ef3 | #466ef3 | RGB(70, 110, 243) | Ultramarine Blue | — |
| #e7c658 | #e7c658 | RGB(231, 198, 88) | Maize (Crayola) | — |
| #1c3c94 | #1c3c94 | RGB(28, 60, 148) | Dark Cornflower Blue | — |
| #5e62a0 | #5e62a0 | RGB(94, 98, 160) | Dark Blue-Gray | — |
| #bfc7db | #bfc7db | RGB(191, 199, 219) | Light Periwinkle | — |
| #303568 | #303568 | RGB(48, 53, 104) | Deep Koamaru | — |
Color Palette Contrast
4 color pairs have low contrast and need improvement which may impact readability.
| Text Color | Background Color | Contrast Ratio |
|---|---|---|
#466ef3 | #5e62a0 | 1.28 |
#e7c658 | #bfc7db | 1.01 |
#1c3c94 | #5e62a0 | 1.75 |
#1c3c94 | #303568 | 1.15 |
Image palette Pop up component design system png
Export Palette
Download the "Pop up component design system" in multiple formats for seamless integration into your design projects.
Available formats: