Vibrant Blue Split-complementary Color Scheme
Five colors arranged by the split-complementary rule around Vibrant Blue (#0339F8), each snapped to its nearest named color.
#0339F8
#FE4401
#ADF802
#0022AA
#FF7F49
Color names and codes
| Name | HEX | RGB | HSL | CMYK | OKLCH | |
|---|---|---|---|---|---|---|
| Vibrant Blue | #0339F8 | 3, 57, 248 | 227°, 98%, 49% | 99, 77, 0, 3 | 48.4% 0.279 264 | |
| Orange Red | #FE4401 | 254, 68, 1 | 16°, 99%, 50% | 0, 73, 100, 0 | 65.8% 0.229 35 | |
| Lemon Green | #ADF802 | 173, 248, 2 | 78°, 98%, 49% | 30, 0, 99, 3 | 89.6% 0.235 128 | |
| City Hunter Blue | #0022AA | 0, 34, 170 | 228°, 100%, 33% | 100, 80, 0, 33 | 36.2% 0.212 264 | |
| Mythical Orange | #FF7F49 | 255, 127, 73 | 18°, 100%, 64% | 0, 50, 71, 0 | 73.4% 0.170 42 |
Which pairs work for text
| Text on background | Contrast | WCAG |
|---|---|---|
| Aa #ADF802 on #0022AA | 8.96:1 | AAA |
| Aa #0339F8 on #ADF802 | 5.50:1 | AA |
| Aa #0022AA on #FF7F49 | 4.63:1 | AA |
| Aa #FE4401 on #0022AA | 3.34:1 | AA large |
| Aa #0339F8 on #FF7F49 | 2.85:1 | — |
| Aa #FE4401 on #ADF802 | 2.68:1 | — |
CSS variables
:root {
--color-1: #0339f8; /* Vibrant Blue */
--color-2: #fe4401; /* Orange Red */
--color-3: #adf802; /* Lemon Green */
--color-4: #0022aa; /* City Hunter Blue */
--color-5: #ff7f49; /* Mythical Orange */
}Other schemes from Vibrant Blue
- Vibrant Blue Complementary Color Scheme#0339F8#4E7FFF#FAC205#A88905#FFDB67
- Vibrant Blue Analogous Color Scheme#01F9C6#00B9FB#0339F8#4400FF#CB00F5
- Vibrant Blue Triadic Color Scheme#0339F8#FE023C#35FA00#6688FF#AA0022
- Vibrant Blue Tetradic Color Scheme#0339F8#FE01B1#FAC205#00FF40#6688FF
- Vibrant Blue Monochromatic Color Scheme#001166#0022AA#0339F8#4466FF#99AAFF
More medium blue split-complementary color schemes
- Admiral Blue Split-complementary Color Scheme#50647F#814D50#7F8353#2F3F53#A97673
- Aster Split-complementary Color Scheme#867BA9#AF9C76#88AA77#5C5083#C7C0A7
- Azure Split-complementary Color Scheme#007FFF#FF0000#FEFF00#095BAF#FF474C
- Bay View Split-complementary Color Scheme#6A819E#A26766#9CA664#475877#BA9B97
- Beach View Split-complementary Color Scheme#4F7694#954C52#948F54#324C61#B7757C
- Bellflower Split-complementary Color Scheme#5D66AA#AD785C#88A95B#4B4775#C3A491
- Blasphemous Blue Split-complementary Color Scheme#3356AA#A94E37#8DA936#243F6C#CE7259
- Blue Split-complementary Color Scheme#0000FF#FF7F00#88FF00#0000BB#FFA64F
- Blue Burst Split-complementary Color Scheme#309CD0#D02B48#CEB736#256D8D#DC6C84
- Blue Overdose Split-complementary Color Scheme#0020EF#EE5500#8EFA00#0018A8#FA873D
- Blue Ribbon Split-complementary Color Scheme#0066FF#FF1500#E3FF00#0048BA#FC5A50
- Blue Triumph Split-complementary Color Scheme#4376AB#AB4343#A5A943#284C75#C97376
Questions
What colors go with Vibrant Blue?
In a split-complementary scheme: Orange Red (#FE4401), Lemon Green (#ADF802), City Hunter Blue (#0022AA), Mythical Orange (#FF7F49).
What is the hex code of Vibrant Blue?
#0339F8.