DreamWorks color palette
EntertainmentDreamWorks uses a distinctive palette centered around a signature sky blue, evoking imagination and wonder. The brand's colors support its whimsical, family-friendly entertainment identity.
dreamworks.comDreamWorks colors
Click any swatch to copy its hex. Hover for RGB and HSL.
Brand colors
The colors people recognise.- DreamWorks Sky BluePrimary0, 151, 214
- DreamWorks Deep BlueSecondary0, 60, 113
- DreamWorks Moon YellowAccent249, 211, 66
Surfaces
Page, cards and dividers.- DreamWorks WhiteBackground255, 255, 255
- DreamWorks Light SkySurface242, 246, 250
- DreamWorks Pale BlueBorder208, 215, 222
Text
Three tiers of copy.- DreamWorks CharcoalText34, 47, 62
- DreamWorks Slate BlueSecondary text74, 106, 138
- DreamWorks MistMuted text140, 166, 188
Semantic
Feedback and state colors.- DreamWorks Success GreenSuccess75, 181, 67
- DreamWorks Warning GoldWarning255, 179, 0
- DreamWorks Error RedError229, 57, 53
- DreamWorks Info BlueInfo41, 182, 246
Use DreamWorks's colors in your project
Pick a format, copy or download. Everything below is generated from the exact hex values above.
dreamworks-palette-colors.css · Paste into your global stylesheet.
:root {
--info: #29B6F6;
--error: #E53935;
--accent: #F9D342;
--border: #D0D7DE;
--primary: #0097D6;
--success: #4BB543;
--surface: #F2F6FA;
--warning: #FFB300;
--secondary: #003C71;
--text-muted: #8CA6BC;
--background: #FFFFFF;
--text-primary: #222F3E;
--text-secondary: #4A6A8A;
}Contrast and accessibility
Every text tone tested against every surface, per WCAG 2.1.
Text on background
Needs 4.5:1 for body text
13.6:1
Pass
Text on surface
Needs 4.5:1 for body text
12.5:1
Pass
Secondary text on background
Needs 4.5:1 for body text
5.6:1
Pass
Secondary text on surface
Needs 4.5:1 for body text
5.2:1
Pass
Muted text on background
Needs 3:1 for large text
2.5:1
Fail
Muted text on surface
Needs 3:1 for large text
2.3:1
Fail
DreamWorks background, border and text colors
The quiet part of the DreamWorks palette: page background, card surfaces, dividers and the three text tones that sit on them. Click a value to copy it.
- DreamWorks WhiteBackground
- HEX
- RGB
- HSL
- DreamWorks Light SkySurface
- HEX
- RGB
- HSL
- DreamWorks Pale BlueBorder
- HEX
- RGB
- HSL
- DreamWorks CharcoalText
- HEX
- RGB
- HSL
- DreamWorks Slate BlueSecondary text
- HEX
- RGB
- HSL
- DreamWorks MistMuted text
- HEX
- RGB
- HSL
About DreamWorks's colors
DreamWorks' palette is dominated by blue tones, reflecting creativity and trust, with yellow accents for warmth and optimism. The color system balances playful vibrancy with cinematic depth.
Primary blue pairs with deep blue for brand consistency.
Yellow accent highlights key actions and elements.
Neutral backgrounds and surfaces support content legibility.
Psychology
Blue conveys imagination, reliability, and a sense of wonder, aligning with DreamWorks' storytelling. Yellow adds a sense of joy and energy, making the brand approachable for families.
Evolution
The core sky blue has remained consistent since the brand's inception, reinforcing recognition. Subtle adjustments to supporting tones have modernized the palette for digital use.
Where DreamWorks uses each color
- Primary
DreamWorks Sky Blue is used in the logo, main navigation, and key brand visuals.
- Secondary
DreamWorks Deep Blue appears in footers, backgrounds, and secondary navigation elements.
- Accent
DreamWorks Moon Yellow is used for call-to-action buttons and highlights.
- Backgrounds
DreamWorks White and Light Sky are used for page backgrounds and content areas.
- Text
Charcoal and Slate Blue are used for primary and secondary text throughout the website and digital assets.
- Semantic
Success Green, Warning Gold, Error Red, and Info Blue are used for alerts, notifications, and status indicators.
DreamWorks color questions
Hex codes, RGB values, neutrals and how to use the palette.
The official DreamWorks primary brand color is DreamWorks Sky Blue, hex code #0097D6.
DreamWorks Sky Blue (#0097D6) is RGB(0, 151, 214) and CMYK(100, 29, 0, 16).
DreamWorks uses Charcoal (#222F3E) for primary text and Pale Blue (#D0D7DE) for borders and UI neutrals.
Use DreamWorks Sky Blue (#0097D6) for primary branding, with Deep Blue (#003C71) and Moon Yellow (#F9D342) for secondary and accent elements. Neutrals and semantic colors support UI clarity and accessibility.
The secondary color is DreamWorks Deep Blue, #003C71, and the accent is DreamWorks Moon Yellow, #F9D342. Together with the primary they make up the three brand colors at the top of this page.
4 of 6 text and background pairings meet WCAG 2.1 AA contrast. The contrast section above shows every pairing with its exact ratio.
Use the export block on this page. It gives you CSS custom properties, a Tailwind config, W3C design tokens or a shadcn/ui theme built from these exact hex values, with copy and download buttons.
Yes. Export the Claude Code skill, Cursor rules or Codex prompt from the same block. The agent then applies DreamWorks's colors consistently when it generates UI.
Make something in the spirit of DreamWorks
Start from this palette's mood and get an original 13-color system for your own project, contrast-checked and ready to export.