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

Jump to: navigation, search
(Created page with "== Breeze Light == See Colors for the main article about color.<br/><br/> <table style='width: 100%!important;' border='1px'> <tr><th>...")
 
(Move notice)
 
(One intermediate revision by one other user not shown)
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></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></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></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></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></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></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></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></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></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></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></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></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></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></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></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></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></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></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></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></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></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></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-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 edited on 5 February 2019, at 16:37. Content is available under Creative Commons License SA 4.0 unless otherwise noted.