SupplementalPalette: 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
m Drl-admin moved page SupplementalcPalette to SupplementalPalette without leaving a redirect
mNo edit summary
 
Line 1: Line 1:
Supplemental palette base colors span the spectrum.  These colors have been selected as a foundation to build and evolve additional palettes from while retaining the overall feel.
==Supplemental Palette==
 
{| class="wikitable" style="
Supplemental colors are available for specialized use -- event-specific
|+Supplemental Palette
theming, sector identity, informational coding, and data visualization.
 
Use sparingly. '''Never use Supplemental colors in place of Classic colors
| style="background-color:#519e2f; color:#ffffff; text-align: center; padding:50px;" | '''Pantone 362''' <br>
on organizational materials.'''
CMYK (49%, 0%, 70%, 38%) <br>
RGB (81, 158, 47) <br>
<div style="background-color:#FFF8E1; border-left:4px solid #FFC20E; padding:12px 16px; margin:12px 0;">
HEX #519E2F <br>
'''Correction (v2.0):''' The v1.0 Style Guide listed Pantone 390 with an
HSL (102, 54%, 40%)
incorrect RGB value of (186, 188, 190) -- that is the value for Cool Gray.
 
The correct value for Pantone 390 is RGB (181, 189, 0). HEX
| style="background-color:#b5bd00; color:#ffffff; text-align: center; padding:50px;" | '''Pantone 390''' <br>
<code>#B5BD00</code> was correct in the original guide.
CMYK (4%, 0%, 100%, 26%) <br>
</div>
RGB (186, 188, 190) <br>
HEX #B5BD00 <br>
{| style="width:100%; border-collapse:separate; border-spacing:6px;"
HSL (210, 3%, 74%)
 
| style="background-color:#C04C36; color:#ffffff; text-align: center; padding:50px;" | '''Pantone 7619''' <br>
CMYK (0%, 60%, 72%, 25%) <br>
RGB (192, 76, 54) <br>
HEX #C04C36 <br>
HSL (10, 56%, 48%)
 
|-
|-
! style="background-color:#890C58; color:#ffffff; text-align: center; padding:50px;" | '''Pantone 228''' <br>
| style="background-color:#519E2F; color:#FFFFFF; padding:24px 16px; text-align:center; width:33%;" |
CMYK (0%, 91%, 36%, 46%) <br>
'''Forest Green'''<br/>
RGB (137, 12, 88) <br>
''Pantone 362''<br/>
HEX #890C58 <br>
<hr style="border-color:#FFFFFF44;"/>
HSL (324, 84%, 29%)
HEX: <code>#519E2F</code><br/>
 
RGB: 81, 158, 47<br/>
! style="background-color:#653279; color:#ffffff; text-align: center; padding:50px;" | '''Pantone 7664''' <br>
CMYK: 49%, 0%, 70%, 38%<br/>
CMYK (17%, 59%, 0%, 53%) <br>
HSL: 102, 54%, 40%
RGB (101, 50, 121) <br>
| style="background-color:#B5BD00; color:#FFFFFF; padding:24px 16px; text-align:center; width:33%;" |
HEX #653279 <br>
'''Yellow Green'''<br/>
HSL (207, 100%, 33%)
''Pantone 390''<br/>
 
<hr style="border-color:#FFFFFF44;"/>
! style="background-color:#0087AE; color:#ffffff; text-align: center; padding:50px;" | '''Pantone 2203''' <br>
HEX: <code>#B5BD00</code><br/>
CMYK (100%, 22%, 0%, 32%) <br>
RGB: 181, 189, 0<br/>
RGB (0, 135, 174) <br>
CMYK: 4%, 0%, 100%, 26%<br/>
HEX #0087AE <br>
HSL: 63, 100%, 37%
HSL (193, 100%, 34%)
| style="background-color:#C04C36; color:#FFFFFF; padding:24px 16px; text-align:center; width:34%;" |
'''Brick Red'''<br/>
''Pantone 7619''<br/>
<hr style="border-color:#FFFFFF44;"/>
HEX: <code>#C04C36</code><br/>
RGB: 192, 76, 54<br/>
CMYK: 0%, 60%, 72%, 25%<br/>
HSL: 10, 56%, 48%
|-
| style="background-color:#890C58; color:#FFFFFF; padding:24px 16px; text-align:center;" |
'''Magenta'''<br/>
''Pantone 228''<br/>
<hr style="border-color:#FFFFFF44;"/>
HEX: <code>#890C58</code><br/>
RGB: 137, 12, 88<br/>
CMYK: 0%, 91%, 36%, 46%<br/>
HSL: 324, 84%, 29%
| style="background-color:#653279; color:#FFFFFF; padding:24px 16px; text-align:center;" |
'''Purple'''<br/>
''Pantone 7664''<br/>
<hr style="border-color:#FFFFFF44;"/>
HEX: <code>#653279</code><br/>
RGB: 101, 50, 121<br/>
CMYK: 17%, 59%, 0%, 53%<br/>
HSL: 285, 41%, 34%
| style="background-color:#0087AE; color:#FFFFFF; padding:24px 16px; text-align:center;" |
'''Teal'''<br/>
''Pantone 2203''<br/>
<hr style="border-color:#FFFFFF44;"/>
HEX: <code>#0087AE</code><br/>
RGB: 0, 135, 174<br/>
CMYK: 100%, 22%, 0%, 32%<br/>
HSL: 193, 100%, 34%
|}
===Supplemental Palette Usage===
{| class="wikitable" style="width:100%"
! style="background-color:#003468; color:#FFFFFF;" | Appropriate Uses
! style="background-color:#6B0000; color:#FFFFFF;" | Not Appropriate
|-
| Event-specific theming where differentiation is needed
| In place of Classic colors on national or corporate materials
|-
| Sector identity (with board approval)
| As dominant color on any multi-audience piece
|-
| Data visualization with 4 or more data categories
| More than two Supplemental colors in a single design
|-
| Informational color-coding systems (maps, diagrams)
| Without Classic Palette anchoring colors present
|}
|}
 
[[Category:Branding]]
[[Category:Branding]]

Latest revision as of 21:01, 31 May 2026

Supplemental Palette

Supplemental colors are available for specialized use -- event-specific theming, sector identity, informational coding, and data visualization. Use sparingly. Never use Supplemental colors in place of Classic colors on organizational materials.

Correction (v2.0): The v1.0 Style Guide listed Pantone 390 with an incorrect RGB value of (186, 188, 190) -- that is the value for Cool Gray. The correct value for Pantone 390 is RGB (181, 189, 0). HEX #B5BD00 was correct in the original guide.

Forest Green
Pantone 362

HEX: #519E2F
RGB: 81, 158, 47
CMYK: 49%, 0%, 70%, 38%
HSL: 102, 54%, 40%

Yellow Green
Pantone 390

HEX: #B5BD00
RGB: 181, 189, 0
CMYK: 4%, 0%, 100%, 26%
HSL: 63, 100%, 37%

Brick Red
Pantone 7619

HEX: #C04C36
RGB: 192, 76, 54
CMYK: 0%, 60%, 72%, 25%
HSL: 10, 56%, 48%

Magenta
Pantone 228

HEX: #890C58
RGB: 137, 12, 88
CMYK: 0%, 91%, 36%, 46%
HSL: 324, 84%, 29%

Purple
Pantone 7664

HEX: #653279
RGB: 101, 50, 121
CMYK: 17%, 59%, 0%, 53%
HSL: 285, 41%, 34%

Teal
Pantone 2203

HEX: #0087AE
RGB: 0, 135, 174
CMYK: 100%, 22%, 0%, 32%
HSL: 193, 100%, 34%

Supplemental Palette Usage

Appropriate Uses Not Appropriate
Event-specific theming where differentiation is needed In place of Classic colors on national or corporate materials
Sector identity (with board approval) As dominant color on any multi-audience piece
Data visualization with 4 or more data categories More than two Supplemental colors in a single design
Informational color-coding systems (maps, diagrams) Without Classic Palette anchoring colors present
Retrieved from "https://drl.droidbuilders.net/index.php?title=SupplementalPalette&oldid=5517"