KDE Visual Design Group/HIG/Color

Jump to: navigation, search

Purpose

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

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 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:
  • Color Mapping - The Breeze color palette maps to the KColorScheme color roles as shown below:


Color SetColor RoleColorhexRGBName
buttonBackgroundAlternate #bdc3c7189,195,199Alternate Grey
BackgroundNormal #eff0f1239,240,241Cardboard Grey
DecorationFocus #3daee961,174,233Plasma Blue
DecorationHover #93cee9147,206,233Hover Blue
ForegroundActive #3daee961,174,233Plasma Blue
ForegroundInactive #7f8c8d127,140,141Coastal Fog
ForegroundLink #2980b941,128,185Abyss Blue
ForegroundNegative #da4453218,68,83Icon Red
ForegroundNeutral #f67400246,116,0Beware Orange
ForegroundNormal 23262935,38,39Shade Black
ForegroundPositive #27ae6039,174,96Noble Fir
ForegroundVisited #7f8c8d127,140,141Coastal Fog
selectionBackgroundAlternate #1d99f329,153,243Icon Blue
BackgroundNormal #3daee961,174,233Plasma Blue
DecorationFocus #3daee961,174,233Plasma Blue
DecorationHover #93cee9147,206,233Hover Blue
ForegroundActive #fcfcfc252,252,252Paper White
ForegroundInactive #eff0f1239,240,241Cardboard Grey
ForegroundLink #fdbc4b253,188,75Icon Yellow
ForegroundNegative #da4453218,68,83Icon Red
ForegroundNeutral #f67400246,116,0Beware Orange
ForegroundNormal fcfcfc252,252,252Paper White
ForegroundPositive #27ae6039,174,96Noble Fir
ForegroundVisited #bdc3c7189,195,199Alternate Grey
tooltipBackgroundAlternate #4d4d4d77,77,77Icon Grey
BackgroundNormal 23262935,38,39Shade Black
DecorationFocus #3daee961,174,233Plasma Blue
DecorationHover #93cee9147,206,233Hover Blue
ForegroundActive #3daee961,174,233Plasma Blue
ForegroundInactive #bdc3c7189,195,199Alternate Grey
ForegroundLink #2980b941,128,185Abyss Blue
ForegroundNegative #da4453218,68,83Icon Red
ForegroundNeutral #f67400246,116,0Beware Orange
ForegroundNormal #fcfcfc252,252,252Paper White
ForegroundPositive #27ae6039,174,96Noble Fir
ForegroundVisited #7f8c8d127,140,141Coastal Fog
viewBackgroundAlternate #eff0f1239,240,241Cardboard Grey
BackgroundNormal #fcfcfc252,252,252Paper White
DecorationFocus #3daee961,174,233Plasma Blue
DecorationHover #93cee9147,206,233Hover Blue
ForegroundActive #3daee961,174,233Plasma Blue
ForegroundInactive #7f8c8d127,140,141Coastal Fog
ForegroundLink #2980b941,128,185Abyss Blue
ForegroundNegative #da4453218,68,83Icon Red
ForegroundNeutral #f67400246,116,0Beware Orange
ForegroundNormal #23262935,38,39Shade Black
ForegroundPositive #27ae6039,174,96Noble Fir
ForegroundVisited #7f8c8d127,140,141Coastal Fog
windowBackgroundAlternate #bdc3c7189,195,199Alternate Grey
BackgroundNormal #eff0f1239,240,241Cardboard Grey
DecorationFocus #3daee961,174,233Plasma Blue
DecorationHover #93cee9147,206,233Hover Blue
ForegroundActive #3daee961,174,233Plasma Blue
ForegroundInactive #7f8c8d127,140,141Coastal Fog
ForegroundLink #2980b941,128,185Abyss Blue
ForegroundNegative #da4453218,68,83Icon Red
ForegroundNeutral #f67400246,116,0Beware Orange
ForegroundNormal #23262935,38,39Shade Black
ForegroundPositive #27ae6039,174,96Noble Fir
ForegroundVisited #7f8c8d127,140,141Coastal Fog
complementaryBackgroundAlternate #3b404559,64,69Burnt Charcoal
BackgroundNormal #31363b49,54,59Charcoal Grey
DecorationFocus #1e92ff30,146,255Deco Blue
DecorationHover #3daee661,174,230Hyper Blue
ForegroundActive #f67400246,116,0Beware Orange
ForegroundInactive #afb0b3175,176,179Lazy Grey
ForegroundLink #3daee661,174,230Hyper Blue
ForegroundNegative #ed1515237,21,21Danger Red
ForegroundNeutral #c9ce3b201,206,59Sunbeam Yellow
ForegroundNormal #eff0f1239,240,241Cardboard Grey
ForegroundPositive #11d11617,209,22Verdant Green
ForegroundVisited #3daee661,174,230Hyper Blue



SCSS Colors: File:Breeze-colors.scss.gz
Gimp Palette: File:Breeze.gpl.gz

See also:


This page was last modified on 6 November 2017, at 16:03. Content is available under Creative Commons License SA 4.0 unless otherwise noted.