Infographic Bright — 5-color palette
#FF3366#33CC99#3399FF#FFCC00#6633FFHex codes
Hex
#FF3366
RGB
255, 51, 102
HSL
345°, 100%, 60%
Hex
#33CC99
RGB
51, 204, 153
HSL
160°, 60%, 50%
Hex
#3399FF
RGB
51, 153, 255
HSL
210°, 100%, 60%
Hex
#FFCC00
RGB
255, 204, 0
HSL
48°, 100%, 50%
Hex
#6633FF
RGB
102, 51, 255
HSL
255°, 100%, 60%
How to use this palette
The first color in Infographic Bright is the dominant tone — use it for primary surfaces and backgrounds. The middle three are the supporting palette: one warm, one cool, one neutral. The last is the accent — reserve it for highlights, calls-to-action, and emphasis.
For web projects, copy the CSS variables below. For print or illustration, use the hex codes directly. If you’re designing for accessibility, check the contrast between the text and background colors before you ship.
CSS
:root {
--infographic-bright-1: #FF3366;
--infographic-bright-2: #33CC99;
--infographic-bright-3: #3399FF;
--infographic-bright-4: #FFCC00;
--infographic-bright-5: #6633FF;
}