关于浊色不饱和色

LearningjQuery.com 博客帖子列表的左边有一个很酷的日期，如图：

从图中我们看到，“2009”垂直排列在右侧。用Firebug查看元素，文本“2009”出现在html结构之中，本文介绍实现这种效果的两种方法。

一、行使Sprite技术来实现

其实现过程已有Chris Coyier 在《Date Display Technique with Sprites》一文中作了具体介绍，这里把其实现过程作一个简单的描述。很显然，我们不希望每一个日期用一张单独的图片，因此，将其整合到一张图片之上，安排年、月、日在图片的不同区域，如图：

1、Html

页面中html结构如下：

<div class="postdate">
        <div class="month m-06">Jun</div>
        <div class="day d-30">30</div>
        <div class="year y-2009">2009</div>
</div>

.postdate容器包含三个区域，分别对应年月日，这样很好的保证了语义上的完整性。

在类似wordpress这样的CMS系统中，厥后端代码是这样的：

<div class="postdate">
        <div class="month m-<?php the_time('m') ?>"><?php the_time('M') ?></div>
        <div class="day d-<?php the_time('d') ?>"><?php the_time('d') ?></div>
        <div class="year y-<?php the_time('Y') ?>"><?php the_time('Y') ?></div>
</div>

2、Css

css是sprite真正发挥作用的地方，行使html中的定义的class属性，让对应的图片得以显示。

首先，让class属性为.postdate的容器相对定位，这样包含其中的三个区域就会定位，并使用统一张背景图片。设置各自的宽度和高度，并将文字移出以显示背景图片。

然后，定义每个月（12）、天天（31）、每年（按10年计）具体的背景位置，以显示与其相对应的图片。

.postdate {
  position: relative;
  width: 50px;
  height: 50px;
  float: left;
}
.month, .day, .year {
  position: absolute;
  text-indent: -1000em;
  background-image: url(/wp-content/themes/ljq/images/dates.png);
  background-repeat: no-repeat;
}
.month { top: 2px; left: 0; width: 32px; height: 24px;}
.day { top: 25px; left: 0; width: 32px; height: 25px;}
.year { bottom: 0; right: 0; width: 17px; height: 48px;}
 
.m-01 { background-position: 0 4px;}
.m-02 { background-position: 0 -28px;}
.m-03 { background-position: 0 -57px;}
... more like this ...
 
.d-01 { background-position: -50px 0;}
.d-02 { background-position: -50px -31px;}
.d-03 { background-position: -50px -62px;}
... more like this ...
 
.y-2006 { background-position: -150px 0;}
.y-2007 { background-position: -150px -50px;}
.y-2008 { background-position: -150px -100px;}
... more like this ...
 

关于浊色大家熟悉多少？

有人说是不纯净的颜色，有的人根本就没这个概念，有的人说是设计师的颜色。那他究竟是什么呢？我个人的理解可以从两方面来诠释它：

（1）从 拾色器 上解析，看下图：

（以色相为红色做图例）

红色+白色 它的亮度越来越高 ，红色+黑色 它的亮度越来越暗，这个是属于垂直色，只是单独加入白或黑来调整红色的明暗。注：黑、白是无彩色
红色+白+黑混杂在一路，可以看成从红色那个颜色的端点向左下角散发出来，红色加诟谇混杂在一路形成不饱和的红色（颜色），我把它定义为浊色（相关其他地方的说法是不饱和的颜色或纯度不高的颜色）。

（2）从画水粉（水彩）方面解析

高中时期学美术，考美术相关的大学，必须考的一课就是水粉画。画水粉画的必须工具和物料：画笔、水粉纸、调色盘、水粉颜料（颜色有许多种，把人们熟悉的7种色彩、诟谇，2种或以上调和了不同的中心色，看具体有多少颜色见文章下面的小知识部分）。以上废话不多说了。一般水粉颜料混杂4种以上，或加白色、黑色，外加水的分量（因为水粉颜料自己的特质需要加清水稀释来作画），等等因素都会降低一种颜色的纯度，使其变得污浊，颜料叠加越多，越混沌不堪，调和的颜色越发显得脏。画过画的人都知道当每次去洗调色板的时候那个水都是灰色的以无法很明确的辨别是偏向什么色相的颜色，剩下的只是污浊的没有效处的脏水。

结合实例分析：

上图背景颜色 拾色器上显示情况

上图文字颜色 拾色器上显示情况

看上图，是一个浊色运用的不错的网站，背景采用了绿+黄+诟谇 、蓝+诟谇等颜色，整个画面基调为蓝绿米灰的基调，明暗处于中灰亮度阶段。是一个特别很是典型的浊色配色的网站。
颜色处于灰色地带颜色的调配是难把握和权衡，尤其是需要注重明度、纯度、色相的平衡。另外，增补一点，上图网站题目文字采用了纯度比较高的颜色，这样的做法是起到了一定的纯度差平衡，不至于整个画面都是灰灰的一片。

小知识：

>>常见水粉颜料颜色种类

红棕色系：深红、大红、朱红、玫瑰红、紫红、肉色、橙红、土红、棕红、赭石、熟褐
黄色系：橘黄、土黄、深黄、中黄、淡黄、柠檬黄 绿色系：墨绿、深绿、橄榄绿、中绿、粉绿、淡绿、黄绿、翠绿、草绿、浅草绿、深草绿
蓝紫色系：普蓝、群青、天蓝、湖蓝、钴蓝、鲜蓝、酞菁蓝、紫罗兰、青莲
高级灰：蓝莲、牙黄灰、浅蟹灰、豆沙红、豆绿灰、月灰、米陀
灰度：煤黑、钛白、培恩灰
特殊颜色：荧光桃红、荧光橙、荧光黄、荧光绿、金、银、紫铜