Pastel colors in css

CSS Legal Color Values

Colors in CSS can be specified by the following methods:

• Hexadecimal colors
• Hexadecimal colors with transparency
• RGB colors
• RGBA colors
• HSL colors
• HSLA colors
• Predefined/Cross-browser color names
• With the currentcolor keyword

Hexadecimal Colors

A hexadecimal color is specified with: #RRGGBB, where the RR (red), GG (green) and BB (blue) hexadecimal integers specify the components of the color. All values must be between 00 and FF.

For example, the #0000ff value is rendered as blue, because the blue component is set to its highest value (ff) and the others are set to 00.

Example

Define different HEX colors:

Hexadecimal Colors With Transparency

A hexadecimal color is specified with: #RRGGBB. To add transparency, add two additional digits between 00 and FF.

Example

Define different HEX colors with transparency:

RGB Colors

An RGB color value is specified with the rgb() function, which has the following syntax:

Each parameter (red, green, and blue) defines the intensity of the color and can be an integer between 0 and 255 or a percentage value (from 0% to 100%).

For example, the rgb(0,0,255) value is rendered as blue, because the blue parameter is set to its highest value (255) and the others are set to 0.

Also, the following values define equal color: rgb(0,0,255) and rgb(0%,0%,100%).

Example

Define different RGB colors:

RGBA Colors

RGBA color values are an extension of RGB color values with an alpha channel — which specifies the opacity of the object.

An RGBA color is specified with the rgba() function, which has the following syntax:

The alpha parameter is a number between 0.0 (fully transparent) and 1.0 (fully opaque).

Example

Define different RGB colors with opacity:

HSL Colors

HSL stands for hue, saturation, and lightness — and represents a cylindrical-coordinate representation of colors.

An HSL color value is specified with the hsl() function, which has the following syntax:

hsl(hue, saturation, lightness)

Hue is a degree on the color wheel (from 0 to 360) — 0 (or 360) is red, 120 is green, 240 is blue. Saturation is a percentage value; 0% means a shade of gray and 100% is the full color. Lightness is also a percentage; 0% is black, 100% is white.

Example

Define different HSL colors:

HSLA Colors

HSLA color values are an extension of HSL color values with an alpha channel — which specifies the opacity of the object.

An HSLA color value is specified with the hsla() function, which has the following syntax:

hsla(hue, saturation, lightness, alpha)

The alpha parameter is a number between 0.0 (fully transparent) and 1.0 (fully opaque).

Example

Define different HSL colors with opacity:

Predefined/Cross-browser Color Names

140 color names are predefined in the HTML and CSS color specification.

For example: blue , red , coral , brown , etc:

Example

Define different color names:

A list of all predefined names can be found in our Color Names Reference.

The currentcolor Keyword

The currentcolor keyword refers to the value of the color property of an element.

Example

The border color of the following element will be blue, because the text color of the element is blue:

Источник

Пастельные цвета и оттенки

Разновидности пастельных цветов и оттенков, список интересных, необычных тонов и их названий, а также коды: HEX, RGB, RAL, NCS, Pantone. На каждый цвет можно перейти по ссылке и скачать его.

• Пастельно-желтый
  HEX: #EFA94A, RGB: 239,169,74
• Пастельно-бирюзовый
  HEX: #7FB5B5, RGB: 127,181,181
• Пастельно-синий
  HEX: #5D9B9B, RGB: 93,155,155
• Пастельно-фиолетовый
  HEX: #A18594, RGB: 161,133,148
• Пастельно-зеленый
  HEX: #77DD77, RGB: 119,221,119
• Пастельно-оранжевый
  HEX: #FF7514, RGB: 255,117,20
• Лососевый
  HEX: #FF8C69, RGB: 255,140,105
• Лососевый Крайола
  HEX: #FF9BAA, RGB: 255,155,170
• Светлый желто-розовый
  HEX: #FFB28B, RGB: 255,178,139
• Желтый Крайола
  HEX: #FCE883, RGB: 252,232,131
• Зелено-бежевый
  HEX: #BEBD7F, RGB: 190,189,127
• Очень светлый желто-зеленый
  HEX: #C6DF90, RGB: 198,223,144
• Салатовый (Салатный)
  HEX: #99FF99, RGB: 153,255,153
• Синий-синий иней
  HEX: #AFDAFC, RGB: 175,218,252
• Лавандовый
  HEX: #E6E6FA, RGB: 230,230,250
• Розово-лавандовый
  HEX: #FFF0F5, RGB: 255,240,245
• Бежевый
  HEX: #F5F5DC, RGB: 245,245,220
• Карамельно-розовый
  HEX: #E4717A, RGB: 228,113,122
• Кофе с молоком (Капучино)
  HEX: #B39F7A, RGB: 179,159,122

• Светлая слоновая кость
  HEX: #E6D690, RGB: 230,214,144
• Жемчужный
  HEX: #EAE0C8, RGB: 234,224,200
• Сливочный
  HEX: #F2E8C9, RGB: 242,232,201
• Сливочно-кремовый
  HEX: #F2DDC6, RGB: 254,40,162
• Кремовый
  HEX: #FDF4E3, RGB: 253,244,227
• Мятно-кремовый
  HEX: #F5FFFA, RGB: 245,255,250
• Мятный
  HEX: #3EB489, RGB: 62,180,137
• Снежно-синий
  HEX: #ACE5EE, RGB: 172,229,238
• Бабушкины яблоки
  HEX: #A8E4A0, RGB: 168,228,160
• Барвинок (Перванш)
  HEX: #CCCCFF, RGB: 204,204,255
• Бананомания
  HEX: #FAE7B5, RGB: 250,231,181
• Бедра испуганной нимфы
  HEX: #FAEEDD, RGB: 250,238,221
• Белый антик
  HEX: #FAEBD7, RGB: 250,235,215
• Белый навахо
  HEX: #FFDEAD, RGB: 255,222,173
• Бисквитный
  HEX: #FFE4C4, RGB: 255,228,196
• Бледно-желтый
  HEX: #FFDB8B, RGB: 255,219,139
• Бледно-золотистый
  HEX: #EEE8AA, RGB: 238,232,170
• Бледно-розовый
  HEX: #FADADD, RGB: 250,218,221
• Бледно-синий
  HEX: #AFEEEE, RGB: 175,238,238
• Болотный
  HEX: #ACB78E, RGB: 172,183,142
• Вердепешевый
  HEX: #DAD871, RGB: 218,216,113
• Весенне-зеленый Крайола
  HEX: #ECEABE, RGB: 236,234,190
• Восход солнца
  HEX: #FFCF48, RGB: 255,207,72
• Гейнсборо
  HEX: #DCDCDC, RGB: 220,220,220
• Голубой колокольчик
  HEX: #A2A2D0, RGB: 162,162,208
• Цвет дыни
  HEX: #F9F8BB, RGB: 249,248,187
• Жевательная резинка
  HEX: #FFC1CC, RGB: 255,193,204
• Персиковый
  HEX: #FFE5B4, RGB: 255,229,180
• Цвет золотарника
  HEX: #FCD975, RGB: 252,217,117
• Васильковый крайола
  HEX: #9ACEEB, RGB: 154,206,235
• Золотой крайола
  HEX: #E7C697, RGB: 231,198,151
• Кадетский синий
  HEX: #5F9EA0, RGB: 95,158,160
• Палевый (Кожа буйвола)
  HEX: #F0DC82, RGB: 240,220,130
• Маисовый
  HEX: #EDD19C, RGB: 237,209,156
• Макароны и сыр
  HEX: #FFBD88, RGB: 255,189,136
• Медовый
  HEX: #FEE5AC, RGB: 254,229,172
• Миндальный
  HEX: #EFDECD, RGB: 239,222,205
• Мокасиновый
  HEX: #FFE4B5, RGB: 255,228,181
• Морской зеленый крайола
  HEX: #9FE2BF, RGB: 159,226,191
• Небесный
  HEX: #7FC7FF, RGB: 127,199,255
• Одуванчиковый
  HEX: #FDDB6D, RGB: 253,219,109
• Папоротниковый
  HEX: #71BC78, RGB: 113,188,120
• Песок пустыни
  HEX: #EFCDB8, RGB: 239,205,184
• Песочный
  HEX: #FCDD76, RGB: 252,221,118
• Платиновый
  HEX: #E5E4E2, RGB: 229,228,226
• Побег папайи
  HEX: #FFEFD5, RGB: 255,239,213
• Пшеничный
  HEX: #F5DEB3, RGB: 245,222,179
• Светлая мальва
  HEX: #DCD0FF, RGB: 220,208,255
• Светло-коралловый
  HEX: #FFBCAD, RGB: 255,188,173
• Светлый хаки
  HEX: #F0E68C, RGB: 240,230,140
• Селадон
  HEX: #ACE1AF, RGB: 172,225,175
• Темный зеленый чай
  HEX: #BADBAD, RGB: 186,219,173
• Цвет заката
  HEX: #FAD6A5, RGB: 250,214,165
• Цвет пергидрольной блондинки
  HEX: #EEE6A3, RGB: 238,230,163
• Циннвальдит
  HEX: #EBC2AF, RGB: 235,194,175
• Чертополох
  HEX: #D8BFD8, RGB: 216,191,216

Источник

Generating pastel colors for css

I was using David Merfield’s randomColor library to generate pastel colors with the call randomColor(< luminosity: 'light' >) . The colors generated weren’t pastel enough for my taste; some of them were too intense, so I wanted to figure out what exactly is it about pastels that gives us that characteristic soft and soothing feeling, and how I would generate such colors.

The first stop is Wikipedia’s article on Pastel (color). It’s very informative right off the bat:

Pastels or pastel colors are the family of colors which, when described in the HSV color space, have high value and low to intermediate saturation.

Great, now we just have to review our knowledge of the HSV color space. We consult Wikipedia with their article on HSL and HSV. The cylindrical graph of the HSV color space is enough to give you an intuitive sense of why a high value and a low to intermediate saturation would afford a pastel color.

Awesome, well why don’t we just set S = 25% and V = 100% and then randomly pick an H value between 0° and 360° to generate a random pastel. My first idea was to generate this HSV triplet and then convert it to RGB for CSS to understand. While this works, it requires a nontrivial algorithm. It turns out CSS supports declaring colors with hsl() , and the conversion from HSV to HSL is a lot simpler.

In fact, I will just tell you that in HSV if S = 25% and V = 100%, then in HSL S = 100% and L = 87.5%. You can double check with a conversion tool. Now we can use a combination of javascript and css to generate pastels:

var hue = Math.floor(Math.random() * 360);
var pastel = 'hsl(' + hue + ', 100%, 87.5%)';
$('div').css('background-color', pastel);

Look at these randomly generated babies:

Источник

CSS Pastel Color Set

If you’re like me you get random ideas for ways to structure html or new ways to build something with css. In the process I always want to quickly add some colors whether to test some design element or just highlight an element using it’s background or border. This is quick prototyping so I don’t want to take the time and go find a pretty color’s hex code or create any sort of color scheme. I also prefer to stick to named colors so while I’m moving the css around I can easily spot which color is the one I am looking for (as opposed to trying to parse hex codes in my head, blegh).

This leaves me with two options for color in my prototypes/snippets.

1. Memorize hex codes that are easy to identify ( #FF0000 for red, #00FF00 for green, #343434 for a nice gray, etc.)
2. Memorize css color names

The second option is the more pleasant one for code readability and typing. I generally choose this option but I was frustrated relying on colors like red , green , blue and so on. The actual values for these base “pure” colors in css are ugly and do not blend well together leading to prototypes that look harsh or hurt my eyes.

The solution!

The answer may seem obvious to some of you and it is. I just had to find a set of color names that I could memorize that already go together then I don’t have to worry about harsh designs or memorizing hex codes! I opted to go with a pastel set that covers the rainbow so there’s enough variety I can use in designs and they’re soft on the eyes.

• pink
• peachpuff
• lightyellow
• palegreen
• lightcyan
• powderblue
• thistle

Источник