background preloader

Web colors

Web colors
Web colors are colors used in displaying web pages, and the methods for describing and specifying those colors. Colors may be specified as an RGB triplet or in hexadecimal format (a hex triplet). They may also be specified according to their common English names in some cases. Hex triplet[edit] A hex triplet is a six-digit, three-byte hexadecimal number used in HTML, CSS, SVG, and other computing applications, to represent colors. Byte 1: red value (color type red) Byte 2: green value (color type green) Byte 3: blue value (color type blue) For example, consider the color where the red/green/blue values are decimal numbers: red=36, green=104, blue=160 (a greyish-blue color). Note that if any one of the three color values is less than 16 (decimal) or 10 (hex), it must be represented with a leading zero so that the triplet always has exactly six digits. The number of colors that can be represented by this system is 2563 or 224 = 16,777,216. Shorthand hexadecimal form[edit] X11 color names[edit]

Lea Verou | Life at the bleeding edge (of web standards) Color Numbers - Hexadecimal Colour Value Calculator for HTML Use this simple java applet to compare html colours quickly and easily. Excellent for designing web pages, as you can set the foreground and background colors to your tastes, and then read their hexadecimal "color code" values, which are used in HTML. You can contrast different sizes of text and/or a big colored area against the background colour. Note that the colours shown are java's interpretation of the colour value. I have chosen a non-descript gray colour for the background of this page, so that your eye may experience the colours you choose with a 'clean palette', as it were. As a note of interest, on page 13 of IBM's G40 Monitor Handbook, 'IBM recommends that the use of primary colour blue on a dark background be avoided. If you bookmark this page, you can come back and use this powerful tool any time you feel like. If you wonder why I consistently spell color/colour as color or colour, it is because I don't trust the search engines to find you one if you search for the other.

LESS « The Dynamic Stylesheet language File: INDENTED_SYNTAX Sass’s indented syntax (also known simply as “Sass”) is designed to provide a more concise and, for some, more aesthetically appealing alternative to the CSS-based SCSS syntax. It’s not compatible with CSS; instead of using { and } to delimit blocks of styles, it uses indentation, and instead of using semicolons to separate statements it uses newlines. This usually leads to substantially less text when saying the same thing. Each statement in Sass, such as property declarations and selectors, must be placed on its own line. would be this Sass: #main color: blue font-size: 0.3em Similarly, this SCSS: #main color: blue font-size: 0.3em a font: weight: bold family: serif &:hover background-color: #eee Sass Syntax Differences In general, most CSS and SCSS syntax works straightforwardly in Sass by using newlines instead of semicolons and indentation instead of braces. Property Syntax The indented syntax supports two ways of declaring CSS properties. #main :color blue :font-size 0.3em @import ! !

demos... | CSS Hacks View full post about browser-specific CSS Hacks here. Red if * html matches in this browser Red if *:first-child+html matches in this browser Red if html>body matches in this browser Red if html>/**/body matches in this browser Red if html:first-child matches in this browser Red if html[xmlns*=""] body:last-child matches in this browser Red if body:nth-of-type(1) matches in this browser Red if div:nth-of-type(1n) matches in this browser Red if body:first-of-type matches in this browser Red if @media screen and (-webkit-min-device-pixel-ratio:0) matches in this browser Red if html[xmlns*=""]:root matches in this browser Red if *|html[xmlns*=""] matches in this browser Red if :root *> matches in this browser Red if *+html matches in this browser Red if * > matches in this browser Red if html:only-child matches in this browser Red if @media all and (min-width: 0px) matches in this browser Red if html:lang(en)>body matches in this browser Red if x:-moz-any-link matches in this browser

Related: