@ustack/uskin
Version:
A graceful framework which provides developers another chance to build an amazing site.
168 lines • 4.54 kB
HTML
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>USkin Theme Color</title>
<link href="./style/style.css" rel="stylesheet">
</head>
<body>
<div class="theme">
<h2 class="theme-intro">Font Color</h2>
<div class="color-block">
<div class="color_font_dark"></div>
<p>#626f7e【18】</p>
</div>
<div class="color-block">
<div class="color_font"></div>
<p>#252f3d【17】</p>
</div>
</div>
<div class="theme">
<h2 class="theme-intro">Gray Beige</h2>
<div class="color-block">
<div class="color_gray_beige_light"></div>
<p>#fafdff【16】</p>
</div>
<div class="color-block">
<div class="color_gray_beige"></div>
<p>#ecf0f2【24】</p>
</div>
<div class="color-block">
<div class="color_gray_beige_x_dark"></div>
<p>#e6ebee[2%]</p>
</div>
<div class="color-block">
<div class="color_gray_beige_x_darker"></div>
<p>#e0e6ea[4%]</p>
</div>
<div class="color-block">
<div class="color_gray_beige_dark"></div>
<p>#c9c9c9【21】</p>
</div>
</div>
<div class="theme">
<h2 class="theme-intro">Gray</h2>
<div class="color-block">
<div class="color_gray_lighter"></div>
<p>#eff8ff【25】</p>
</div>
<div class="color-block">
<div class="color_gray_light"></div>
<p>#e2e7ea【23】</p>
</div>
<div class="color-block">
<div class="color_gray"></div>
<p>#d5dddf【22】</p>
</div>
<div class="color-block">
<div class="color_gray_dark"></div>
<p>#b2c1cc【20】</p>
</div>
<div class="color-block">
<div class="color_gray_darker"></div>
<p>#92a0a9【19】</p>
</div>
</div>
<div class="theme">
<h2 class="theme-intro">Blue</h2>
<div class="color-block">
<div class="color_blue_x_lighter"></div>
<p>#f5fdfe【15】</p>
</div>
<div class="color-block">
<div class="color_blue_x_light"></div>
<p>#e1f4f7【14】</p>
</div>
<div class="color-block">
<div class="color_blue_lighter"></div>
<p>#b9f1f9【13】</p>
</div>
<div class="color-block">
<div class="color_blue_light"></div>
<p>#9de6f1【12】</p>
</div>
<div class="color-block">
<div class="color_blue"></div>
<p>#00afc8【11】</p>
</div>
<div class="color-block">
<div class="color_blue_x_dark"></div>
<p>#00a6be[2%]</p>
</div>
<div class="color-block">
<div class="color_blue_x_darker"></div>
<p>#009db4[4%]</p>
</div>
<div class="color-block">
<div class="color_blue_dark"></div>
<p>#159fb8【10】</p>
</div>
</div>
<div class="theme">
<h2 class="theme-intro">Green</h2>
<div class="color-block">
<div class="color_green_light"></div>
<p>#def9f6【9】</p>
</div>
<div class="color-block">
<div class="color_green"></div>
<p>#1eb9a5【8】</p>
</div>
<div class="color-block">
<div class="color_green_x_dark"></div>
<p>#1db09d[2%]</p>
</div>
<div class="color-block">
<div class="color_green_x_darker"></div>
<p>#1ba795[4%]</p>
</div>
<div class="color-block">
<div class="color_green_dark"></div>
<p>#19af95【7】</p>
</div>
</div>
<div class="theme">
<h2 class="theme-intro">Red</h2>
<div class="color-block">
<div class="color_red_light"></div>
<p>#fff5f5【NEW】</p>
</div>
<div class="color-block">
<div class="color_red_lighter"></div>
<p>#fdc4c8【6】</p>
</div>
<div class="color-block">
<div class="color_red"></div>
<p>#e05c69【5】</p>
</div>
<div class="color-block">
<div class="color_red_x_dark"></div>
<p>#de5361[2%]</p>
</div>
<div class="color-block">
<div class="color_red_x_darker"></div>
<p>#dd4b59[4%]</p>
</div>
<div class="color-block">
<div class="color_red_dark"></div>
<p>#d04354【4】</p>
</div>
</div>
<div class="theme">
<h2 class="theme-intro">Orange</h2>
<div class="color-block">
<div class="color_orange_light"></div>
<p>#fff7ec【3】</p>
</div>
<div class="color-block">
<div class="color_orange"></div>
<p>#f2994b【2】</p>
</div>
<div class="color-block">
<div class="color_orange_dark"></div>
<p>#f78913【1】</p>
</div>
</div>
</body>
</html>