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

Jump to: navigation, search
(Move notice)
 
Line 1: Line 1:
== Breeze Dark ==
+
{{Note|This page is now on [[https://hig.kde.org/style/color/dark.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(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(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(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(61,174,233);'>&#160;</td><td>#3daee9</td><td>61,174,233</td><td>Plasma 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></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(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(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(61,174,233);'>&#160;</td><td>#3daee9</td><td>61,174,233</td><td>Plasma 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(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></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(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(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(61,174,233);'>&#160;</td><td>#3daee9</td><td>61,174,233</td><td>Plasma 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></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(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(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(49,54,59);'>&#160;</td><td>#31363b</td><td>49,54,59</td><td>Charcoal Grey</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(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(61,174,233);'>&#160;</td><td>#3daee9</td><td>61,174,233</td><td>Plasma 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></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(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(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(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(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(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(61,174,233);'>&#160;</td><td>#3daee9</td><td>61,174,233</td><td>Plasma 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></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(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(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></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></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></td></tr>
+
<tr><td>ForegroundActive</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>ForegroundInactive</td><td style='background-color: rgb(175,176,179);'>&#160;</td><td>#afb0b3</td><td>175,176,179</td><td></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></td></tr>
+
<tr><td>ForegroundNegative</td><td style='background-color: rgb(237,21,21);'>&#160;</td><td>#ed1515</td><td>237,21,21</td><td>Danger Red</td></tr>
+
<tr><td>ForegroundNeutral</td><td style='background-color: rgb(201,206,59);'>&#160;</td><td>#c9ce3b</td><td>201,206,59</td><td>Sunbeam 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(17,209,22);'>&#160;</td><td>#11d116</td><td>17,209,22</td><td>Verdant 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></td></tr>
+
</table>
+
 
+
<br/><br/>
+
SCSS Colors: [[File:Breeze-colors-dark.scss.gz |SCSS Colors]] <br/>
+
Gimp Palette: [[File:Breeze-dark.gpl.gz |Gimp Palette]]
+

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