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

Jump to: navigation, search
(Move notice)
 
Line 1: Line 1:
== Breeze Light ==
+
{{Note|This page is now on [[https://hig.kde.org/style/color/light.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(224,223,222);'>&#160;</td><td>#e0dfde</td><td>224,223,222</td><td></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(142,203,233);'>&#160;</td><td>#8ecbe9</td><td>142,203,233</td><td></td></tr>
+
<tr><td>ForegroundActive</td><td style='background-color: rgb(255,128,224);'>&#160;</td><td>#ff80e0</td><td>255,128,224</td><td></td></tr>
+
<tr><td>ForegroundInactive</td><td style='background-color: rgb(136,135,134);'>&#160;</td><td>#888786</td><td>136,135,134</td><td></td></tr>
+
<tr><td>ForegroundLink</td><td style='background-color: rgb(0,87,174);'>&#160;</td><td>#0057ae</td><td>0,87,174</td><td></td></tr>
+
<tr><td>ForegroundNegative</td><td style='background-color: rgb(191,3,3);'>&#160;</td><td>#bf0303</td><td>191,3,3</td><td></td></tr>
+
<tr><td>ForegroundNeutral</td><td style='background-color: rgb(176,128,0);'>&#160;</td><td>#b08000</td><td>176,128,0</td><td></td></tr>
+
<tr><td>ForegroundNormal</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>ForegroundPositive</td><td style='background-color: rgb(0,110,40);'>&#160;</td><td>#006e28</td><td>0,110,40</td><td></td></tr>
+
<tr><td>ForegroundVisited</td><td style='background-color: rgb(69,40,134);'>&#160;</td><td>#452886</td><td>69,40,134</td><td></td></tr>
+
<tr><td rowspan='12'>selection</td><td>BackgroundAlternate</td><td style='background-color: rgb(62,138,204);'>&#160;</td><td>#3e8acc</td><td>62,138,204</td><td></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(142,203,233);'>&#160;</td><td>#8ecbe9</td><td>142,203,233</td><td></td></tr>
+
<tr><td>ForegroundActive</td><td style='background-color: rgb(255,128,224);'>&#160;</td><td>#ff80e0</td><td>255,128,224</td><td></td></tr>
+
<tr><td>ForegroundInactive</td><td style='background-color: rgb(142,203,233);'>&#160;</td><td>#8ecbe9</td><td>142,203,233</td><td></td></tr>
+
<tr><td>ForegroundLink</td><td style='background-color: rgb(0,49,110);'>&#160;</td><td>#00316e</td><td>0,49,110</td><td></td></tr>
+
<tr><td>ForegroundNegative</td><td style='background-color: rgb(156,14,14);'>&#160;</td><td>#9c0e0e</td><td>156,14,14</td><td></td></tr>
+
<tr><td>ForegroundNeutral</td><td style='background-color: rgb(255,221,0);'>&#160;</td><td>#ffdd00</td><td>255,221,0</td><td></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(128,255,128);'>&#160;</td><td>#80ff80</td><td>128,255,128</td><td></td></tr>
+
<tr><td>ForegroundVisited</td><td style='background-color: rgb(69,40,134);'>&#160;</td><td>#452886</td><td>69,40,134</td><td></td></tr>
+
<tr><td rowspan='12'>tooltip</td><td>BackgroundAlternate</td><td style='background-color: rgb(196,224,255);'>&#160;</td><td>#c4e0ff</td><td>196,224,255</td><td></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(142,203,233);'>&#160;</td><td>#8ecbe9</td><td>142,203,233</td><td></td></tr>
+
<tr><td>ForegroundActive</td><td style='background-color: rgb(255,128,224);'>&#160;</td><td>#ff80e0</td><td>255,128,224</td><td></td></tr>
+
<tr><td>ForegroundInactive</td><td style='background-color: rgb(96,112,128);'>&#160;</td><td>#607080</td><td>96,112,128</td><td></td></tr>
+
<tr><td>ForegroundLink</td><td style='background-color: rgb(0,87,174);'>&#160;</td><td>#0057ae</td><td>0,87,174</td><td></td></tr>
+
<tr><td>ForegroundNegative</td><td style='background-color: rgb(191,3,3);'>&#160;</td><td>#bf0303</td><td>191,3,3</td><td></td></tr>
+
<tr><td>ForegroundNeutral</td><td style='background-color: rgb(176,128,0);'>&#160;</td><td>#b08000</td><td>176,128,0</td><td></td></tr>
+
<tr><td>ForegroundNormal</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>ForegroundPositive</td><td style='background-color: rgb(0,110,40);'>&#160;</td><td>#006e28</td><td>0,110,40</td><td></td></tr>
+
<tr><td>ForegroundVisited</td><td style='background-color: rgb(69,40,134);'>&#160;</td><td>#452886</td><td>69,40,134</td><td></td></tr>
+
<tr><td rowspan='12'>view</td><td>BackgroundAlternate</td><td style='background-color: rgb(248,247,246);'>&#160;</td><td>#f8f7f6</td><td>248,247,246</td><td></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(142,203,233);'>&#160;</td><td>#8ecbe9</td><td>142,203,233</td><td></td></tr>
+
<tr><td>ForegroundActive</td><td style='background-color: rgb(255,128,224);'>&#160;</td><td>#ff80e0</td><td>255,128,224</td><td></td></tr>
+
<tr><td>ForegroundInactive</td><td style='background-color: rgb(136,135,134);'>&#160;</td><td>#888786</td><td>136,135,134</td><td></td></tr>
+
<tr><td>ForegroundLink</td><td style='background-color: rgb(0,87,174);'>&#160;</td><td>#0057ae</td><td>0,87,174</td><td></td></tr>
+
<tr><td>ForegroundNegative</td><td style='background-color: rgb(191,3,3);'>&#160;</td><td>#bf0303</td><td>191,3,3</td><td></td></tr>
+
<tr><td>ForegroundNeutral</td><td style='background-color: rgb(176,128,0);'>&#160;</td><td>#b08000</td><td>176,128,0</td><td></td></tr>
+
<tr><td>ForegroundNormal</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>ForegroundPositive</td><td style='background-color: rgb(0,110,40);'>&#160;</td><td>#006e28</td><td>0,110,40</td><td></td></tr>
+
<tr><td>ForegroundVisited</td><td style='background-color: rgb(69,40,134);'>&#160;</td><td>#452886</td><td>69,40,134</td><td></td></tr>
+
<tr><td rowspan='12'>window</td><td>BackgroundAlternate</td><td style='background-color: rgb(218,217,216);'>&#160;</td><td>#dad9d8</td><td>218,217,216</td><td></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(142,203,233);'>&#160;</td><td>#8ecbe9</td><td>142,203,233</td><td></td></tr>
+
<tr><td>ForegroundActive</td><td style='background-color: rgb(255,128,224);'>&#160;</td><td>#ff80e0</td><td>255,128,224</td><td></td></tr>
+
<tr><td>ForegroundInactive</td><td style='background-color: rgb(136,135,134);'>&#160;</td><td>#888786</td><td>136,135,134</td><td></td></tr>
+
<tr><td>ForegroundLink</td><td style='background-color: rgb(0,87,174);'>&#160;</td><td>#0057ae</td><td>0,87,174</td><td></td></tr>
+
<tr><td>ForegroundNegative</td><td style='background-color: rgb(191,3,3);'>&#160;</td><td>#bf0303</td><td>191,3,3</td><td></td></tr>
+
<tr><td>ForegroundNeutral</td><td style='background-color: rgb(176,128,0);'>&#160;</td><td>#b08000</td><td>176,128,0</td><td></td></tr>
+
<tr><td>ForegroundNormal</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>ForegroundPositive</td><td style='background-color: rgb(0,110,40);'>&#160;</td><td>#006e28</td><td>0,110,40</td><td></td></tr>
+
<tr><td>ForegroundVisited</td><td style='background-color: rgb(69,40,134);'>&#160;</td><td>#452886</td><td>69,40,134</td><td></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(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>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(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>Hyper Blue</td></tr>
+
</table>
+
 
+
<br/><br/>
+
SCSS Colors: [[File:breeze-colors-light.scss.gz |SCSS Colors]] <br/>
+
Gimp Palette: [[File:breeze-colors-light.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.