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

Jump to: navigation, search
(Move notice)
 
Line 1: Line 1:
== Breeze High Contrast ==
+
{{Note|This page is now on [[https://hig.kde.org/style/color/high.html https://hig.kde.org/]]}}
 
+
See [[KDE_Visual_Design_Group/HIG/Color|Colors]] for the main article about color.<br/><br/>
+
 
+
 
+
<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(77,77,77);'>&#160;</td><td>#4d4d4d</td><td>77,77,77</td><td>Icon Grey</td></tr>
+
<tr><td>DecorationFocus</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>DecorationHover</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>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(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'>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(52,73,94);'>&#160;</td><td>#34495e</td><td>52,73,94</td><td>Night Blue</td></tr>
+
<tr><td>DecorationFocus</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>DecorationHover</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>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(252,252,252);'>&#160;</td><td>#fcfcfc</td><td>252,252,252</td><td>Paper White</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(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(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(29,153,243);'>&#160;</td><td>#1d99f3</td><td>29,153,243</td><td>Icon Blue</td></tr>
+
<tr><td>DecorationFocus</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>DecorationHover</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>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(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(41,44,48);'>&#160;</td><td>#292c30</td><td>41,44,48</td><td></td></tr>
+
<tr><td>BackgroundNormal</td><td style='background-color: rgb(35,38,41);'>&#160;</td><td>#232629</td><td>35,38,41</td><td>Shade Black</td></tr>
+
<tr><td>DecorationFocus</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>DecorationHover</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>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(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'>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(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(29,153,243);'>&#160;</td><td>#1d99f3</td><td>29,153,243</td><td>Icon Blue</td></tr>
+
<tr><td>DecorationHover</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>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(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'>complementary</td><td>BackgroundAlternate</td><td style='background-color: rgb(41,44,48);'>&#160;</td><td>#292c30</td><td>41,44,48</td><td></td></tr>
+
<tr><td>BackgroundNormal</td><td style='background-color: rgb(35,38,41);'>&#160;</td><td>#232629</td><td>35,38,41</td><td>Shade Black</td></tr>
+
<tr><td>DecorationFocus</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>DecorationHover</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>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(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>
+
</table>
+
 
+
<br/><br/>
+
SCSS Colors: [[File:breeze-colors-contrast.scss.gz |SCSS Colors]] <br/>
+
Gimp Palette: [[File:breeze-colors-contrast.gpl.gz |Gimp Palette]]
+

Latest revision as of 16:37, 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:37. Content is available under Creative Commons License SA 4.0 unless otherwise noted.