Difference between revisions of "KDE Visual Design Group/HIG/Color"

Jump to: navigation, search
m (Tweaks for spelling typos.)
(Move notice)
 
Line 1: Line 1:
==Purpose==
+
{{Note|This page is now on [[https://hig.kde.org/style/color/index.html https://hig.kde.org/]]}}
Color is a distinguishing quality of human perception. Color can be used to communicate and draw attention efficiently. Color can assign significance to an object. However, color is a historical and cultural phenomenon and is subject to continuous aesthetical changes. It should also be noted that a large part of the population cannot perceive color in the same way that most people will.
+
 
+
A consistent color set helps create a familiar visual language throughout the user interface.
+
 
+
==Guidelines==
+
[[File:Breeze Color Palette.png|frame|none|alt=Alt text|Breeze Color Palette]]
+
* While the system color theme can be selected by the user, the Breeze color palette (above) is used for the reference visual design of KDE Applications and Workspaces, and make up the default system color theme.
+
** Primary colors are used throughout the main interface of the applications and workspaces. '''Plasma Blue''' is used as the primary highlight color.
+
** Secondary colors are used sparingly as accents throughout the visual design.
+
** Whenever transparency is used (e.g. shadows) consider using the opacities listed.
+
* Avoid using color as a primary method of communication. Color is best used as a secondary method to reinforce meaning visually. You should not only rely on color to convey meaning but also typography, layout, sizes, etc.
+
* Ensure sufficient contrast between foreground and background colors.
+
* Keep in mind accessibility for users with color vision deficiency (~5% population).  Use one of the many available online color blindness simulators to ensure colors intended to be distinguishable remain distinguishable for color-blind users.
+
 
+
==Implementation==
+
* When implementing colors in your application, select the appropriate theme color or system color from the palette provided by the Qt or KDE Platform/Frameworks library. You can use the [http://kde-look.org/content/show.php/CheckColorRoles?content=90034 CheckColorRoles] theme to detect bugs regarding the use of system colors in your application.
+
* [http://api.kde.org/frameworks-api/frameworks5-apidocs/kconfigwidgets/html/classKColorScheme.html KColorScheme] provides methods to pick the colors from the system color scheme to avoid hardcoding colors where possible.
+
* For QML use:
+
** in applications use [https://api.kde.org/frameworks/kirigami/html/classKirigami_1_1PlatformTheme.html Kirigami.Theme] to pick theme colors
+
** in Plasmoids use [https://api.kde.org/frameworks/plasma-framework/html/classPlasma_1_1QuickTheme.html PlasmaCore.Theme] to pick theme colors
+
* Color Mapping - The Breeze color palette maps to the KColorScheme color roles as shown below:
+
 
+
 
+
 
+
<table style='width: 100%!important;' border='1px'>
+
<tr><th>Color Set</th><th>Color Role</th><th>Color</th><th>hex</th><th>RGB</th><th>Name</th></tr>
+
<tr><td rowspan='12'>button</td><td>BackgroundAlternate</td><td style='background-color: rgb(189,195,199);'>&#160;</td><td>#bdc3c7</td><td>189,195,199</td><td>Alternate Grey</td></tr>
+
<tr><td>BackgroundNormal</td><td style='background-color: rgb(239,240,241);'>&#160;</td><td>#eff0f1</td><td>239,240,241</td><td>Cardboard Grey</td></tr>
+
<tr><td>DecorationFocus</td><td style='background-color: rgb(61,174,233);'>&#160;</td><td>#3daee9</td><td>61,174,233</td><td>Plasma Blue</td></tr>
+
<tr><td>DecorationHover</td><td style='background-color: rgb(147,206,233);'>&#160;</td><td>#93cee9</td><td>147,206,233</td><td>Hover Blue</td></tr>
+
<tr><td>ForegroundActive</td><td style='background-color: rgb(61,174,233);'>&#160;</td><td>#3daee9</td><td>61,174,233</td><td>Plasma Blue</td></tr>
+
<tr><td>ForegroundInactive</td><td style='background-color: rgb(127,140,141);'>&#160;</td><td>#7f8c8d</td><td>127,140,141</td><td>Coastal Fog</td></tr>
+
<tr><td>ForegroundLink</td><td style='background-color: rgb(41,128,185);'>&#160;</td><td>#2980b9</td><td>41,128,185</td><td>Abyss Blue</td></tr>
+
<tr><td>ForegroundNegative</td><td style='background-color: rgb(218,68,83);'>&#160;</td><td>#da4453</td><td>218,68,83</td><td>Icon Red</td></tr>
+
<tr><td>ForegroundNeutral</td><td style='background-color: rgb(246,116,0);'>&#160;</td><td>#f67400</td><td>246,116,0</td><td>Beware Orange</td></tr>
+
<tr><td>ForegroundNormal</td><td style='background-color: rgb(35,38,39);'>&#160;</td><td>#232627</td><td>35,38,39</td><td></td></tr>
+
<tr><td>ForegroundPositive</td><td style='background-color: rgb(39,174,96);'>&#160;</td><td>#27ae60</td><td>39,174,96</td><td>Noble Fir</td></tr>
+
<tr><td>ForegroundVisited</td><td style='background-color: rgb(127,140,141);'>&#160;</td><td>#7f8c8d</td><td>127,140,141</td><td>Coastal Fog</td></tr>
+
<tr><td rowspan='12'>selection</td><td>BackgroundAlternate</td><td style='background-color: rgb(29,153,243);'>&#160;</td><td>#1d99f3</td><td>29,153,243</td><td>Icon Blue</td></tr>
+
<tr><td>BackgroundNormal</td><td style='background-color: rgb(61,174,233);'>&#160;</td><td>#3daee9</td><td>61,174,233</td><td>Plasma Blue</td></tr>
+
<tr><td>DecorationFocus</td><td style='background-color: rgb(61,174,233);'>&#160;</td><td>#3daee9</td><td>61,174,233</td><td>Plasma Blue</td></tr>
+
<tr><td>DecorationHover</td><td style='background-color: rgb(147,206,233);'>&#160;</td><td>#93cee9</td><td>147,206,233</td><td>Hover Blue</td></tr>
+
<tr><td>ForegroundActive</td><td style='background-color: rgb(252,252,252);'>&#160;</td><td>#fcfcfc</td><td>252,252,252</td><td>Paper White</td></tr>
+
<tr><td>ForegroundInactive</td><td style='background-color: rgb(239,240,241);'>&#160;</td><td>#eff0f1</td><td>239,240,241</td><td>Cardboard Grey</td></tr>
+
<tr><td>ForegroundLink</td><td style='background-color: rgb(253,188,75);'>&#160;</td><td>#fdbc4b</td><td>253,188,75</td><td>Icon Yellow</td></tr>
+
<tr><td>ForegroundNegative</td><td style='background-color: rgb(218,68,83);'>&#160;</td><td>#da4453</td><td>218,68,83</td><td>Icon Red</td></tr>
+
<tr><td>ForegroundNeutral</td><td style='background-color: rgb(246,116,0);'>&#160;</td><td>#f67400</td><td>246,116,0</td><td>Beware Orange</td></tr>
+
<tr><td>ForegroundNormal</td><td style='background-color: rgb(252,252,252);'>&#160;</td><td>#fcfcfc</td><td>252,252,252</td><td>Paper White</td></tr>
+
<tr><td>ForegroundPositive</td><td style='background-color: rgb(39,174,96);'>&#160;</td><td>#27ae60</td><td>39,174,96</td><td>Noble Fir</td></tr>
+
<tr><td>ForegroundVisited</td><td style='background-color: rgb(189,195,199);'>&#160;</td><td>#bdc3c7</td><td>189,195,199</td><td>Alternate Grey</td></tr>
+
<tr><td rowspan='12'>tooltip</td><td>BackgroundAlternate</td><td style='background-color: rgb(77,77,77);'>&#160;</td><td>#4d4d4d</td><td>77,77,77</td><td>Icon Grey</td></tr>
+
<tr><td>BackgroundNormal</td><td style='background-color: rgb(35,38,39);'>&#160;</td><td>#232627</td><td>35,38,39</td><td></td></tr>
+
<tr><td>DecorationFocus</td><td style='background-color: rgb(61,174,233);'>&#160;</td><td>#3daee9</td><td>61,174,233</td><td>Plasma Blue</td></tr>
+
<tr><td>DecorationHover</td><td style='background-color: rgb(147,206,233);'>&#160;</td><td>#93cee9</td><td>147,206,233</td><td>Hover Blue</td></tr>
+
<tr><td>ForegroundActive</td><td style='background-color: rgb(61,174,233);'>&#160;</td><td>#3daee9</td><td>61,174,233</td><td>Plasma Blue</td></tr>
+
<tr><td>ForegroundInactive</td><td style='background-color: rgb(189,195,199);'>&#160;</td><td>#bdc3c7</td><td>189,195,199</td><td>Alternate Grey</td></tr>
+
<tr><td>ForegroundLink</td><td style='background-color: rgb(41,128,185);'>&#160;</td><td>#2980b9</td><td>41,128,185</td><td>Abyss Blue</td></tr>
+
<tr><td>ForegroundNegative</td><td style='background-color: rgb(218,68,83);'>&#160;</td><td>#da4453</td><td>218,68,83</td><td>Icon Red</td></tr>
+
<tr><td>ForegroundNeutral</td><td style='background-color: rgb(246,116,0);'>&#160;</td><td>#f67400</td><td>246,116,0</td><td>Beware Orange</td></tr>
+
<tr><td>ForegroundNormal</td><td style='background-color: rgb(252,252,252);'>&#160;</td><td>#fcfcfc</td><td>252,252,252</td><td>Paper White</td></tr>
+
<tr><td>ForegroundPositive</td><td style='background-color: rgb(39,174,96);'>&#160;</td><td>#27ae60</td><td>39,174,96</td><td>Noble Fir</td></tr>
+
<tr><td>ForegroundVisited</td><td style='background-color: rgb(127,140,141);'>&#160;</td><td>#7f8c8d</td><td>127,140,141</td><td>Coastal Fog</td></tr>
+
<tr><td rowspan='12'>view</td><td>BackgroundAlternate</td><td style='background-color: rgb(239,240,241);'>&#160;</td><td>#eff0f1</td><td>239,240,241</td><td>Cardboard Grey</td></tr>
+
<tr><td>BackgroundNormal</td><td style='background-color: rgb(252,252,252);'>&#160;</td><td>#fcfcfc</td><td>252,252,252</td><td>Paper White</td></tr>
+
<tr><td>DecorationFocus</td><td style='background-color: rgb(61,174,233);'>&#160;</td><td>#3daee9</td><td>61,174,233</td><td>Plasma Blue</td></tr>
+
<tr><td>DecorationHover</td><td style='background-color: rgb(147,206,233);'>&#160;</td><td>#93cee9</td><td>147,206,233</td><td>Hover Blue</td></tr>
+
<tr><td>ForegroundActive</td><td style='background-color: rgb(61,174,233);'>&#160;</td><td>#3daee9</td><td>61,174,233</td><td>Plasma Blue</td></tr>
+
<tr><td>ForegroundInactive</td><td style='background-color: rgb(127,140,141);'>&#160;</td><td>#7f8c8d</td><td>127,140,141</td><td>Coastal Fog</td></tr>
+
<tr><td>ForegroundLink</td><td style='background-color: rgb(41,128,185);'>&#160;</td><td>#2980b9</td><td>41,128,185</td><td>Abyss Blue</td></tr>
+
<tr><td>ForegroundNegative</td><td style='background-color: rgb(218,68,83);'>&#160;</td><td>#da4453</td><td>218,68,83</td><td>Icon Red</td></tr>
+
<tr><td>ForegroundNeutral</td><td style='background-color: rgb(246,116,0);'>&#160;</td><td>#f67400</td><td>246,116,0</td><td>Beware Orange</td></tr>
+
<tr><td>ForegroundNormal</td><td style='background-color: rgb(35,38,39);'>&#160;</td><td>#232627</td><td>35,38,39</td><td></td></tr>
+
<tr><td>ForegroundPositive</td><td style='background-color: rgb(39,174,96);'>&#160;</td><td>#27ae60</td><td>39,174,96</td><td>Noble Fir</td></tr>
+
<tr><td>ForegroundVisited</td><td style='background-color: rgb(127,140,141);'>&#160;</td><td>#7f8c8d</td><td>127,140,141</td><td>Coastal Fog</td></tr>
+
<tr><td rowspan='12'>window</td><td>BackgroundAlternate</td><td style='background-color: rgb(189,195,199);'>&#160;</td><td>#bdc3c7</td><td>189,195,199</td><td>Alternate Grey</td></tr>
+
<tr><td>BackgroundNormal</td><td style='background-color: rgb(239,240,241);'>&#160;</td><td>#eff0f1</td><td>239,240,241</td><td>Cardboard Grey</td></tr>
+
<tr><td>DecorationFocus</td><td style='background-color: rgb(61,174,233);'>&#160;</td><td>#3daee9</td><td>61,174,233</td><td>Plasma Blue</td></tr>
+
<tr><td>DecorationHover</td><td style='background-color: rgb(147,206,233);'>&#160;</td><td>#93cee9</td><td>147,206,233</td><td>Hover Blue</td></tr>
+
<tr><td>ForegroundActive</td><td style='background-color: rgb(61,174,233);'>&#160;</td><td>#3daee9</td><td>61,174,233</td><td>Plasma Blue</td></tr>
+
<tr><td>ForegroundInactive</td><td style='background-color: rgb(127,140,141);'>&#160;</td><td>#7f8c8d</td><td>127,140,141</td><td>Coastal Fog</td></tr>
+
<tr><td>ForegroundLink</td><td style='background-color: rgb(41,128,185);'>&#160;</td><td>#2980b9</td><td>41,128,185</td><td>Abyss Blue</td></tr>
+
<tr><td>ForegroundNegative</td><td style='background-color: rgb(218,68,83);'>&#160;</td><td>#da4453</td><td>218,68,83</td><td>Icon Red</td></tr>
+
<tr><td>ForegroundNeutral</td><td style='background-color: rgb(246,116,0);'>&#160;</td><td>#f67400</td><td>246,116,0</td><td>Beware Orange</td></tr>
+
<tr><td>ForegroundNormal</td><td style='background-color: rgb(35,38,39);'>&#160;</td><td>#232627</td><td>35,38,39</td><td></td></tr>
+
<tr><td>ForegroundPositive</td><td style='background-color: rgb(39,174,96);'>&#160;</td><td>#27ae60</td><td>39,174,96</td><td>Noble Fir</td></tr>
+
<tr><td>ForegroundVisited</td><td style='background-color: rgb(127,140,141);'>&#160;</td><td>#7f8c8d</td><td>127,140,141</td><td>Coastal Fog</td></tr>
+
<tr><td rowspan='12'>complementary</td><td>BackgroundAlternate</td><td style='background-color: rgb(59,64,69);'>&#160;</td><td>#3b4045</td><td>59,64,69</td><td>Burnt Charcoal</td></tr>
+
<tr><td>BackgroundNormal</td><td style='background-color: rgb(49,54,59);'>&#160;</td><td>#31363b</td><td>49,54,59</td><td>Charcoal Grey</td></tr>
+
<tr><td>DecorationFocus</td><td style='background-color: rgb(30,146,255);'>&#160;</td><td>#1e92ff</td><td>30,146,255</td><td>Deco Blue</td></tr>
+
<tr><td>DecorationHover</td><td style='background-color: rgb(61,174,230);'>&#160;</td><td>#3daee6</td><td>61,174,230</td><td>Hyper Blue</td></tr>
+
<tr><td>ForegroundActive</td><td style='background-color: rgb(147,206,233);'>&#160;</td><td>#93cee9</td><td>147,206,233</td><td>Hover Blue</td></tr>
+
<tr><td>ForegroundInactive</td><td style='background-color: rgb(175,176,179);'>&#160;</td><td>#afb0b3</td><td>175,176,179</td><td>Lazy Grey</td></tr>
+
<tr><td>ForegroundLink</td><td style='background-color: rgb(61,174,230);'>&#160;</td><td>#3daee6</td><td>61,174,230</td><td>Hyper Blue</td></tr>
+
<tr><td>ForegroundNegative</td><td style='background-color: rgb(231,76,60);'>&#160;</td><td>#e74c3c</td><td>231,76,60</td><td>Pimpinella</td></tr>
+
<tr><td>ForegroundNeutral</td><td style='background-color: rgb(253,188,75);'>&#160;</td><td>#fdbc4b</td><td>253,188,75</td><td>Icon Yellow</td></tr>
+
<tr><td>ForegroundNormal</td><td style='background-color: rgb(239,240,241);'>&#160;</td><td>#eff0f1</td><td>239,240,241</td><td>Cardboard Grey</td></tr>
+
<tr><td>ForegroundPositive</td><td style='background-color: rgb(46,204,113);'>&#160;</td><td>#2ecc71</td><td>46,204,113</td><td>Icon Green</td></tr>
+
<tr><td>ForegroundVisited</td><td style='background-color: rgb(61,174,230);'>&#160;</td><td>#3daee6</td><td>61,174,230</td><td>Hyper Blue</td></tr>
+
</table>
+
<br/><br/>
+
SCSS Colors: [[File:Breeze-colors.scss.gz|SCSS Colors]] <br/>
+
Gimp Palette: [[File:Breeze.gpl.gz|Gimp Palette]]
+
 
+
See also:
+
* [[KDE_Visual_Design_Group/HIG/BreezeDark|Breeze Dark]]
+
* [[KDE_Visual_Design_Group/HIG/BreezeLight|Breeze Light]]
+
* [[KDE_Visual_Design_Group/HIG/BreezeHighContrast|Breeze High Contrast]]
+
 
+
[[Category:Usability]][[Category: Presentation]]
+

Latest revision as of 16:44, 5 February 2019

Note-box-icon.png
 
Note
This page is now on [https://hig.kde.org/]

This page was last modified on 5 February 2019, at 16:44. Content is available under Creative Commons License SA 4.0 unless otherwise noted.