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

Line 19: Line 19:
 
* For QML use [https://api.kde.org/frameworks/plasma-framework/html/classPlasma_1_1QuickTheme.html QuickTheme] to pick theme colors
 
* For QML use [https://api.kde.org/frameworks/plasma-framework/html/classPlasma_1_1QuickTheme.html QuickTheme] to pick theme colors
 
* Color Mapping - The Breeze color palette maps to the KColorScheme color roles as shown below:
 
* Color Mapping - The Breeze color palette maps to the KColorScheme color roles as shown below:
[[File:Color mapping.png]]
+
 
 +
 
 +
 
 +
<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></tr>
 +
<tr><td rowspan='12'>button</td><td>BackgroundAlternate</td><td style='background-color: rgb(189,195,199);'>&#160;</td><td>#010809</td><td>189,195,199</td></tr>
 +
<tr><td>BackgroundNormal</td><td style='background-color: rgb(239,240,241);'>&#160;</td><td>#020309</td><td>239,240,241</td></tr>
 +
<tr><td>DecorationFocus</td><td style='background-color: rgb(61,174,233);'>&#160;</td><td>#060100</td><td>61,174,233</td></tr>
 +
<tr><td>DecorationHover</td><td style='background-color: rgb(147,206,233);'>&#160;</td><td>#010407</td><td>147,206,233</td></tr>
 +
<tr><td>ForegroundActive</td><td style='background-color: rgb(61,174,233);'>&#160;</td><td>#060100</td><td>61,174,233</td></tr>
 +
<tr><td>ForegroundInactive</td><td style='background-color: rgb(127,140,141);'>&#160;</td><td>#010207</td><td>127,140,141</td></tr>
 +
<tr><td>ForegroundLink</td><td style='background-color: rgb(41,128,185);'>&#160;</td><td>#040100</td><td>41,128,185</td></tr>
 +
<tr><td>ForegroundNegative</td><td style='background-color: rgb(218,68,83);'>&#160;</td><td>#020108</td><td>218,68,83</td></tr>
 +
<tr><td>ForegroundNeutral</td><td style='background-color: rgb(246,116,0);'>&#160;</td><td>#020406</td><td>246,116,0</td></tr>
 +
<tr><td>ForegroundNormal</td><td style='background-color: rgb(49,54,59);'>&#160;</td><td>#040900</td><td>49,54,59</td></tr>
 +
<tr><td>ForegroundPositive</td><td style='background-color: rgb(39,174,96);'>&#160;</td><td>#030900</td><td>39,174,96</td></tr>
 +
<tr><td>ForegroundVisited</td><td style='background-color: rgb(127,140,141);'>&#160;</td><td>#010207</td><td>127,140,141</td></tr>
 +
<tr><td rowspan='12'>selection</td><td>BackgroundAlternate</td><td style='background-color: rgb(29,153,243);'>&#160;</td><td>#020900</td><td>29,153,243</td></tr>
 +
<tr><td>BackgroundNormal</td><td style='background-color: rgb(61,174,233);'>&#160;</td><td>#060100</td><td>61,174,233</td></tr>
 +
<tr><td>DecorationFocus</td><td style='background-color: rgb(61,174,233);'>&#160;</td><td>#060100</td><td>61,174,233</td></tr>
 +
<tr><td>DecorationHover</td><td style='background-color: rgb(147,206,233);'>&#160;</td><td>#010407</td><td>147,206,233</td></tr>
 +
<tr><td>ForegroundActive</td><td style='background-color: rgb(252,252,252);'>&#160;</td><td>#020502</td><td>252,252,252</td></tr>
 +
<tr><td>ForegroundInactive</td><td style='background-color: rgb(239,240,241);'>&#160;</td><td>#020309</td><td>239,240,241</td></tr>
 +
<tr><td>ForegroundLink</td><td style='background-color: rgb(253,188,75);'>&#160;</td><td>#020503</td><td>253,188,75</td></tr>
 +
<tr><td>ForegroundNegative</td><td style='background-color: rgb(218,68,83);'>&#160;</td><td>#020108</td><td>218,68,83</td></tr>
 +
<tr><td>ForegroundNeutral</td><td style='background-color: rgb(246,116,0);'>&#160;</td><td>#020406</td><td>246,116,0</td></tr>
 +
<tr><td>ForegroundNormal</td><td style='background-color: rgb(239,240,241);'>&#160;</td><td>#020309</td><td>239,240,241</td></tr>
 +
<tr><td>ForegroundPositive</td><td style='background-color: rgb(39,174,96);'>&#160;</td><td>#030900</td><td>39,174,96</td></tr>
 +
<tr><td>ForegroundVisited</td><td style='background-color: rgb(189,195,199);'>&#160;</td><td>#010809</td><td>189,195,199</td></tr>
 +
<tr><td rowspan='12'>tooltip</td><td>BackgroundAlternate</td><td style='background-color: rgb(77,77,77);'>&#160;</td><td>#070700</td><td>77,77,77</td></tr>
 +
<tr><td>BackgroundNormal</td><td style='background-color: rgb(49,54,59);'>&#160;</td><td>#040900</td><td>49,54,59</td></tr>
 +
<tr><td>DecorationFocus</td><td style='background-color: rgb(61,174,233);'>&#160;</td><td>#060100</td><td>61,174,233</td></tr>
 +
<tr><td>DecorationHover</td><td style='background-color: rgb(147,206,233);'>&#160;</td><td>#010407</td><td>147,206,233</td></tr>
 +
<tr><td>ForegroundActive</td><td style='background-color: rgb(61,174,233);'>&#160;</td><td>#060100</td><td>61,174,233</td></tr>
 +
<tr><td>ForegroundInactive</td><td style='background-color: rgb(189,195,199);'>&#160;</td><td>#010809</td><td>189,195,199</td></tr>
 +
<tr><td>ForegroundLink</td><td style='background-color: rgb(41,128,185);'>&#160;</td><td>#040100</td><td>41,128,185</td></tr>
 +
<tr><td>ForegroundNegative</td><td style='background-color: rgb(218,68,83);'>&#160;</td><td>#020108</td><td>218,68,83</td></tr>
 +
<tr><td>ForegroundNeutral</td><td style='background-color: rgb(246,116,0);'>&#160;</td><td>#020406</td><td>246,116,0</td></tr>
 +
<tr><td>ForegroundNormal</td><td style='background-color: rgb(239,240,241);'>&#160;</td><td>#020309</td><td>239,240,241</td></tr>
 +
<tr><td>ForegroundPositive</td><td style='background-color: rgb(39,174,96);'>&#160;</td><td>#030900</td><td>39,174,96</td></tr>
 +
<tr><td>ForegroundVisited</td><td style='background-color: rgb(127,140,141);'>&#160;</td><td>#010207</td><td>127,140,141</td></tr>
 +
<tr><td rowspan='12'>view</td><td>BackgroundAlternate</td><td style='background-color: rgb(239,240,241);'>&#160;</td><td>#020309</td><td>239,240,241</td></tr>
 +
<tr><td>BackgroundNormal</td><td style='background-color: rgb(252,252,252);'>&#160;</td><td>#020502</td><td>252,252,252</td></tr>
 +
<tr><td>DecorationFocus</td><td style='background-color: rgb(61,174,233);'>&#160;</td><td>#060100</td><td>61,174,233</td></tr>
 +
<tr><td>DecorationHover</td><td style='background-color: rgb(147,206,233);'>&#160;</td><td>#010407</td><td>147,206,233</td></tr>
 +
<tr><td>ForegroundActive</td><td style='background-color: rgb(61,174,233);'>&#160;</td><td>#060100</td><td>61,174,233</td></tr>
 +
<tr><td>ForegroundInactive</td><td style='background-color: rgb(127,140,141);'>&#160;</td><td>#010207</td><td>127,140,141</td></tr>
 +
<tr><td>ForegroundLink</td><td style='background-color: rgb(41,128,185);'>&#160;</td><td>#040100</td><td>41,128,185</td></tr>
 +
<tr><td>ForegroundNegative</td><td style='background-color: rgb(218,68,83);'>&#160;</td><td>#020108</td><td>218,68,83</td></tr>
 +
<tr><td>ForegroundNeutral</td><td style='background-color: rgb(246,116,0);'>&#160;</td><td>#020406</td><td>246,116,0</td></tr>
 +
<tr><td>ForegroundNormal</td><td style='background-color: rgb(49,54,59);'>&#160;</td><td>#040900</td><td>49,54,59</td></tr>
 +
<tr><td>ForegroundPositive</td><td style='background-color: rgb(39,174,96);'>&#160;</td><td>#030900</td><td>39,174,96</td></tr>
 +
<tr><td>ForegroundVisited</td><td style='background-color: rgb(127,140,141);'>&#160;</td><td>#010207</td><td>127,140,141</td></tr>
 +
<tr><td rowspan='12'>window</td><td>BackgroundAlternate</td><td style='background-color: rgb(189,195,199);'>&#160;</td><td>#010809</td><td>189,195,199</td></tr>
 +
<tr><td>BackgroundNormal</td><td style='background-color: rgb(239,240,241);'>&#160;</td><td>#020309</td><td>239,240,241</td></tr>
 +
<tr><td>DecorationFocus</td><td style='background-color: rgb(61,174,233);'>&#160;</td><td>#060100</td><td>61,174,233</td></tr>
 +
<tr><td>DecorationHover</td><td style='background-color: rgb(147,206,233);'>&#160;</td><td>#010407</td><td>147,206,233</td></tr>
 +
<tr><td>ForegroundActive</td><td style='background-color: rgb(61,174,233);'>&#160;</td><td>#060100</td><td>61,174,233</td></tr>
 +
<tr><td>ForegroundInactive</td><td style='background-color: rgb(127,140,141);'>&#160;</td><td>#010207</td><td>127,140,141</td></tr>
 +
<tr><td>ForegroundLink</td><td style='background-color: rgb(41,128,185);'>&#160;</td><td>#040100</td><td>41,128,185</td></tr>
 +
<tr><td>ForegroundNegative</td><td style='background-color: rgb(218,68,83);'>&#160;</td><td>#020108</td><td>218,68,83</td></tr>
 +
<tr><td>ForegroundNeutral</td><td style='background-color: rgb(246,116,0);'>&#160;</td><td>#020406</td><td>246,116,0</td></tr>
 +
<tr><td>ForegroundNormal</td><td style='background-color: rgb(49,54,59);'>&#160;</td><td>#040900</td><td>49,54,59</td></tr>
 +
<tr><td>ForegroundPositive</td><td style='background-color: rgb(39,174,96);'>&#160;</td><td>#030900</td><td>39,174,96</td></tr>
 +
<tr><td>ForegroundVisited</td><td style='background-color: rgb(127,140,141);'>&#160;</td><td>#010207</td><td>127,140,141</td></tr>
 +
<tr><td rowspan='12'>complementary</td><td>BackgroundAlternate</td><td style='background-color: rgb(59,64,69);'>&#160;</td><td>#050900</td><td>59,64,69</td></tr>
 +
<tr><td>BackgroundNormal</td><td style='background-color: rgb(49,54,59);'>&#160;</td><td>#040900</td><td>49,54,59</td></tr>
 +
<tr><td>DecorationFocus</td><td style='background-color: rgb(30,146,255);'>&#160;</td><td>#030000</td><td>30,146,255</td></tr>
 +
<tr><td>DecorationHover</td><td style='background-color: rgb(61,174,230);'>&#160;</td><td>#060100</td><td>61,174,230</td></tr>
 +
<tr><td>ForegroundActive</td><td style='background-color: rgb(246,116,0);'>&#160;</td><td>#020406</td><td>246,116,0</td></tr>
 +
<tr><td>ForegroundInactive</td><td style='background-color: rgb(175,176,179);'>&#160;</td><td>#010705</td><td>175,176,179</td></tr>
 +
<tr><td>ForegroundLink</td><td style='background-color: rgb(61,174,230);'>&#160;</td><td>#060100</td><td>61,174,230</td></tr>
 +
<tr><td>ForegroundNegative</td><td style='background-color: rgb(237,21,21);'>&#160;</td><td>#020307</td><td>237,21,21</td></tr>
 +
<tr><td>ForegroundNeutral</td><td style='background-color: rgb(201,206,59);'>&#160;</td><td>#020001</td><td>201,206,59</td></tr>
 +
<tr><td>ForegroundNormal</td><td style='background-color: rgb(239,240,241);'>&#160;</td><td>#020309</td><td>239,240,241</td></tr>
 +
<tr><td>ForegroundPositive</td><td style='background-color: rgb(17,209,22);'>&#160;</td><td>#010700</td><td>17,209,22</td></tr>
 +
<tr><td>ForegroundVisited</td><td style='background-color: rgb(61,174,230);'>&#160;</td><td>#060100</td><td>61,174,230</td></tr>
 +
</table>
 +
 
 +
[[File:Breeze-colors.scss.gz|SCSS Colors]]
  
 
[[Category:Usability]][[Category: Presentation]]
 
[[Category:Usability]][[Category: Presentation]]

Revision as of 14:48, 27 April 2017

Purpose

Color is a basal quality in human perception. Color can be used for communication, it is a very efficient way to direct attention, and significance can be assigned to an object with color. However, color is a historical and cultural phenomenon, and is subject of continuous aesthetical changes. Furthermore, it should be taken into consideration that a rather high percentage of population has a perception disorder ranging from difficulties to discriminate between red and green to complete color blindness.

A consistent color set helps create a familiar visual language throughout the user interface.

Guidelines

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.
    • Where 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 secondary method to reinforce meaning visually.
  • Ensure sufficient contrast between foreground and background colors.
  • Consider 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 CheckColorRoles theme to detect bugs regarding the use of system colors in your application.
  • KColorScheme provides methods to pick the colors from the system color scheme to avoid hardcoding colors where possible.
  • For QML use QuickTheme to pick theme colors
  • Color Mapping - The Breeze color palette maps to the KColorScheme color roles as shown below:


Color SetColor RoleColorhexRGB
buttonBackgroundAlternate #010809189,195,199
BackgroundNormal #020309239,240,241
DecorationFocus #06010061,174,233
DecorationHover #010407147,206,233
ForegroundActive #06010061,174,233
ForegroundInactive #010207127,140,141
ForegroundLink #04010041,128,185
ForegroundNegative #020108218,68,83
ForegroundNeutral #020406246,116,0
ForegroundNormal #04090049,54,59
ForegroundPositive #03090039,174,96
ForegroundVisited #010207127,140,141
selectionBackgroundAlternate #02090029,153,243
BackgroundNormal #06010061,174,233
DecorationFocus #06010061,174,233
DecorationHover #010407147,206,233
ForegroundActive #020502252,252,252
ForegroundInactive #020309239,240,241
ForegroundLink #020503253,188,75
ForegroundNegative #020108218,68,83
ForegroundNeutral #020406246,116,0
ForegroundNormal #020309239,240,241
ForegroundPositive #03090039,174,96
ForegroundVisited #010809189,195,199
tooltipBackgroundAlternate #07070077,77,77
BackgroundNormal #04090049,54,59
DecorationFocus #06010061,174,233
DecorationHover #010407147,206,233
ForegroundActive #06010061,174,233
ForegroundInactive #010809189,195,199
ForegroundLink #04010041,128,185
ForegroundNegative #020108218,68,83
ForegroundNeutral #020406246,116,0
ForegroundNormal #020309239,240,241
ForegroundPositive #03090039,174,96
ForegroundVisited #010207127,140,141
viewBackgroundAlternate #020309239,240,241
BackgroundNormal #020502252,252,252
DecorationFocus #06010061,174,233
DecorationHover #010407147,206,233
ForegroundActive #06010061,174,233
ForegroundInactive #010207127,140,141
ForegroundLink #04010041,128,185
ForegroundNegative #020108218,68,83
ForegroundNeutral #020406246,116,0
ForegroundNormal #04090049,54,59
ForegroundPositive #03090039,174,96
ForegroundVisited #010207127,140,141
windowBackgroundAlternate #010809189,195,199
BackgroundNormal #020309239,240,241
DecorationFocus #06010061,174,233
DecorationHover #010407147,206,233
ForegroundActive #06010061,174,233
ForegroundInactive #010207127,140,141
ForegroundLink #04010041,128,185
ForegroundNegative #020108218,68,83
ForegroundNeutral #020406246,116,0
ForegroundNormal #04090049,54,59
ForegroundPositive #03090039,174,96
ForegroundVisited #010207127,140,141
complementaryBackgroundAlternate #05090059,64,69
BackgroundNormal #04090049,54,59
DecorationFocus #03000030,146,255
DecorationHover #06010061,174,230
ForegroundActive #020406246,116,0
ForegroundInactive #010705175,176,179
ForegroundLink #06010061,174,230
ForegroundNegative #020307237,21,21
ForegroundNeutral #020001201,206,59
ForegroundNormal #020309239,240,241
ForegroundPositive #01070017,209,22
ForegroundVisited #06010061,174,230

File:Breeze-colors.scss.gz


Content is available under Creative Commons License SA 4.0 unless otherwise noted.
-->