Cinematic Teal & Orange — 5-color palette
#1A2A3A#2A4A5C#E89B5A#F5C28E#FFD9A8Hex codes
Hex
#1A2A3A
RGB
26, 42, 58
HSL
210°, 38%, 16%
Hex
#2A4A5C
RGB
42, 74, 92
HSL
202°, 37%, 26%
Hex
#E89B5A
RGB
232, 155, 90
HSL
27°, 76%, 63%
Hex
#F5C28E
RGB
245, 194, 142
HSL
30°, 84%, 76%
Hex
#FFD9A8
RGB
255, 217, 168
HSL
34°, 100%, 83%
How to use this palette
The first color in Cinematic Teal & Orange 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 {
--cinematic-teal-orange-1: #1A2A3A;
--cinematic-teal-orange-2: #2A4A5C;
--cinematic-teal-orange-3: #E89B5A;
--cinematic-teal-orange-4: #F5C28E;
--cinematic-teal-orange-5: #FFD9A8;
}