ClassicPalette: Difference between revisions

From Droid Reference Library
Jump to navigation Jump to search
Browse history interactively
← Older edit
Drl-admin (talk | contribs)
Bureaucrats, Administrators
665 edits
mNo edit summary
mNo edit summary
 
Line 1: Line 1:
This is the standard classic palette and can be applied to all materials.   
==Classic Palette==
 
{| class="wikitable"
The Classic Palette is the anchor of the DroidBuilders brand. These six colors
|+Classic Palette
define our visual identity and must appear consistently across all materials.
 
   
| style="background-color:#ffffff; text-align: center; padding:50px;" | '''White''' <br>
<div style="background-color:#FFF8E1; border-left:4px solid #FFC20E; padding:12px 16px; margin:12px 0;">
CMYK (0%, 0%, 0%, 0%)<br>
'''Primary Brand Color:''' Deep Navy (<code>#003468</code>). When one color
RGB (255, 255, 255)<br>
must represent DroidBuilders alone, use Deep Navy.
HEX #FFFFFF<br>
</div>
HSL (0, 0%, 100%)
 
{| style="width:100%; border-collapse:separate; border-spacing:6px;"
| style="background-color:#babcbe; color:#ffffff; text-align: center; padding:50px;" | '''Cool Gray''' <br>
CMYK (2%, 1%, 0%, 25%)<br>
RGB (186, 188, 190)<br>
HEX #BABCBE<br>
HSL (210, 3%, 74%)
 
| style="background-color:#333333; color:#ffffff; text-align: center; padding:50px;" | '''Process Black''' <br>
CMYK (0%, 0%, 0%, 100%)<br>
RGB (0, 0, 0)<br>
HEX #000000<br>
HSL (0, 0%, 0%)
|-
|-
 
| style="background-color:#003468; color:#FFFFFF; padding:24px 16px; text-align:center; width:33%;" |
| style="background-color:#ffc20e; color:#ffffff; text-align: center; padding:50px;" | '''Pantone 7408''' <br>
'''Deep Navy''' (Primary Brand Color)<br/>
CMYK (0%, 24%, 95%, 0%)<br>
''Pantone 648''<br/>
RGB (255, 194, 14)<br>
<hr style="border-color:#FFFFFF44;"/>
HEX #FFC20E<br>
HEX: <code>#003468</code><br/>
HSL (45, 100%, 53%)
RGB: 0, 52, 104<br/>
 
CMYK: 100%, 50%, 0%, 59%<br/>
| style="background-color:#005ba8; color:#ffffff; text-align: center; padding:50px;" | '''Pantone 7685''' <br>
HSL: 210, 100%, 20%
CMYK (100%, 46%, 0%, 34%)<br>
| style="background-color:#005BA8; color:#FFFFFF; padding:24px 16px; text-align:center; width:33%;" |
RGB (0, 91, 168)<br>
'''Brand Blue'''<br/>
HEX #005BA8<br>
''Pantone 7685''<br/>
HSL (207, 100%, 33%)
<hr style="border-color:#FFFFFF44;"/>
 
HEX: <code>#005BA8</code><br/>
| style="background-color:#003468; color:#ffffff; text-align: center; padding:50px;" | '''Pantone 648''' <br>
RGB: 0, 91, 168<br/>
CMYK (100%, 50%, 0%, 59%)<br>
CMYK: 100%, 46%, 0%, 34%<br/>
RGB (0, 52, 104)<br>
HSL: 207, 100%, 33%
HEX #003468<br>
| style="background-color:#FFC20E; color:#003468; padding:24px 16px; text-align:center; width:34%;" |
HSL (210, 100%, 20%)
'''Gold'''<br/>
''Pantone 7408''<br/>
<hr style="border-color:#00346844;"/>
HEX: <code>#FFC20E</code><br/>
RGB: 255, 194, 14<br/>
CMYK: 0%, 24%, 95%, 0%<br/>
HSL: 45, 100%, 53%
|-
| style="background-color:#FFFFFF; color:#003468; padding:24px 16px; text-align:center; border:1px solid #CCCCCC;" |
'''White'''<br/>
<hr style="border-color:#00346844;"/>
HEX: <code>#FFFFFF</code><br/>
RGB: 255, 255, 255<br/>
CMYK: 0%, 0%, 0%, 0%<br/>
HSL: 0, 0%, 100%
| style="background-color:#BABCBE; color:#003468; padding:24px 16px; text-align:center;" |
'''Cool Gray'''<br/>
<hr style="border-color:#00346844;"/>
HEX: <code>#BABCBE</code><br/>
RGB: 186, 188, 190<br/>
CMYK: 2%, 1%, 0%, 25%<br/>
HSL: 210, 3%, 74%
| style="background-color:#000000; color:#FFFFFF; padding:24px 16px; text-align:center;" |
'''Process Black'''<br/>
<hr style="border-color:#FFFFFF44;"/>
HEX: <code>#000000</code><br/>
RGB: 0, 0, 0<br/>
CMYK: 0%, 0%, 0%, 100%<br/>
HSL: 0, 0%, 0%
|}
===Color Roles===
{| class="wikitable" style="width:100%"
! style="background-color:#003468; color:#FFFFFF;" | Color
! style="background-color:#003468; color:#FFFFFF;" | Primary Role
! style="background-color:#003468; color:#FFFFFF;" | Common Uses
|-
| '''Deep Navy'''
| Primary brand identity
| Headers, dominant print backgrounds, primary brand applications
|-
| '''Brand Blue'''
| Secondary identity
| Supporting headers, callout boxes, links in print
|-
| '''Gold'''
| Accent and highlight
| CTAs, icon accents, emphasis, key navigation elements
|-
| '''White'''
| Base and contrast
| Primary text on dark; clean background in print
|-
| '''Cool Gray'''
| Supporting neutral
| Secondary text, dividers, supporting UI elements
|-
| '''Process Black'''
| Maximum contrast
| Body text in print; high-contrast applications
|}
|}
 
[[Category:Branding]]
[[Category:Branding]]

Latest revision as of 20:58, 31 May 2026

Classic Palette

The Classic Palette is the anchor of the DroidBuilders brand. These six colors define our visual identity and must appear consistently across all materials.

Primary Brand Color: Deep Navy (#003468). When one color must represent DroidBuilders alone, use Deep Navy.

Deep Navy (Primary Brand Color)
Pantone 648

HEX: #003468
RGB: 0, 52, 104
CMYK: 100%, 50%, 0%, 59%
HSL: 210, 100%, 20%

Brand Blue
Pantone 7685

HEX: #005BA8
RGB: 0, 91, 168
CMYK: 100%, 46%, 0%, 34%
HSL: 207, 100%, 33%

Gold
Pantone 7408

HEX: #FFC20E
RGB: 255, 194, 14
CMYK: 0%, 24%, 95%, 0%
HSL: 45, 100%, 53%

White

HEX: #FFFFFF
RGB: 255, 255, 255
CMYK: 0%, 0%, 0%, 0%
HSL: 0, 0%, 100%

Cool Gray

HEX: #BABCBE
RGB: 186, 188, 190
CMYK: 2%, 1%, 0%, 25%
HSL: 210, 3%, 74%

Process Black

HEX: #000000
RGB: 0, 0, 0
CMYK: 0%, 0%, 0%, 100%
HSL: 0, 0%, 0%

Color Roles

Color Primary Role Common Uses
Deep Navy Primary brand identity Headers, dominant print backgrounds, primary brand applications
Brand Blue Secondary identity Supporting headers, callout boxes, links in print
Gold Accent and highlight CTAs, icon accents, emphasis, key navigation elements
White Base and contrast Primary text on dark; clean background in print
Cool Gray Supporting neutral Secondary text, dividers, supporting UI elements
Process Black Maximum contrast Body text in print; high-contrast applications
Retrieved from "https://drl.droidbuilders.net/index.php?title=ClassicPalette&oldid=5514"