OBINTUSACADEMY
HOME CONTACT SERVICES PRIVACY
C.B MS-PACKAGES CSS
CSS - Colors

BASIC

Introduction to CSS Getting Started CSS Basic Structure CSS Syntax CSS Selectors CSS Universal Selector CSS Element Selector CSS ID Selector CSS Class Selector CSS Group Selector CSS Descendant Selector CSS Child Selector CSS Adjacent Sibling Selector CSS General Sibling Selector CSS Pseudo Element Selector CSS Pseudo Class Selector CSS Attribute Selector CSS Comments CSS Rule CSS Colors CSS Foreground and Background Color CSS Fonts CSS Background CSS Background Clip CSS Background Origin CSS Background Size CSS Text/Word Formatting CSS Images

INTERMEDIATE

CSS Borders CSS Margin CSS Padding CSS Dimension CSS Outline CSS Lists CSS Tables CSS Links CSS Overflow CSS Cursor CSS Float CSS Clear CSS Box Sizing CSS Display CSS Positioning CSS Z-Indexing CSS Opacity CSS Icons CSS Media Queries

ADVANCE

CSS Multiple Backgrounds CSS Gradient CSS Shadow CSS 2D Transform CSS 3D Transform CSS Transition CSS Animation CSS Image Reflection CSS Masking CSS Navigation Bar CSS Dropdown CSS !important CSS Specificity CSS Math Functions CSS Web Fonts CSS Pagination CSS Multiple Columns CSS Resizing and Offset CSS Variables CSS Conclusion

CSS Colors

PREVIOUS NEXT

In this tutorial, I will be showing you all you need to know about colors and how you can use them in CSS

Color in CSS is a property that is used to set the color (foreground color) of any HTML element on your web page.

Example

TRY IT OUT YOURSELF

Types of Colors

Below are different types of colors.

NAMED COLORS

These are pre-defined colors as: blue, yellow, orange, green, black, white, etc.

Example

TRY IT OUT YOURSELF

RGB COLORS

RGB stands for (Red, Green, Blue) which takes value ranging from 0 - 256. Each value specifies the intensity of the color.

Example

TRY IT OUT YOURSELF
  • RGBA - This color is extension of the RGB color in which the A (Alpha) represents the opacity. Alpha value ranges from 0.0 to 1

    • Example

    TRY IT OUT YOURSELF

HEX COLORS

HEX colors are hexadecimal color written in the format #RRGGBB which stands for # RR(Red) BB(Blue) GG(Green). Its value ranges between 00 and FF

Example

TRY IT OUT YOURSELF
  • 3-DIGIT HEX VALUE - This value is a shorthand (shortform) for some 6-digit hex color it follows the format #RGB, where r,g,b stands for red, green and blue; which takes value ranging between 0 to F

    • Example

    TRY IT OUT YOURSELF
note
NOTE:

3-digit hex code are used only when both values (RR, GG, BB) are the same. For example: that is #FF00EE can be written as #f0e


HSL COLORS

HSL stands for Hue, Saturation, Light. Hue value ranges from 0 - 360. Saturation and Light ranges from 0 - 100%

Example

TRY IT OUT YOURSELF
tips
TIP:

Hue is the degree on the color wheel.
Saturation is the intensity of the color
Light is amount of light given to the color.


  • HSLA - This color is extension of the HSL color in which the A (Alpha) represents the opacity. Alpha value ranges from 0.0 to 1

    • Example

    TRY IT OUT YOURSELF

KEYWORD COLORS

Keyword colors are like named colors which can also be used in CSS.

  • TRANSPARENT - This keyword is used to make the HTML element transparent.
    • TRY IT OUT YOURSELF
  • CURRENTCOLOR - This keyword is used to refer to the current value of the element's color.
    • TRY IT OUT YOURSELF
  • INHERIT - This keyword is used to make the element take the value of a property from its parent.
    • TRY IT OUT YOURSELF

HWB COLORS

HWB stands for Hue, Whiteness, Blackness. Hue value ranges from 0 - 360. Whiteness and Blackness ranges from 0 - 100%

note
NOTE:

HWB is not supported in HTML yet!


CMYK COLORS

CMYK stands for Cyan, Magenta, Yellow and Black. It ranges from 0 - 100%

note
NOTE:

HWB is not supported in HTML yet!


Background Color

The background-color property in CSS is used to set the background color of any HTML element on your web page.

TRY IT OUT YOURSELF

Caret Color

The caret-color property in CSS is used to set color for the text cursor (caret) inside an input or textarea form element.

TRY IT OUT YOURSELF

Border Color

The border-color property in CSS is used to set the color of the border.

TRY IT OUT YOURSELF

Others

Other color properties include:

  • box-Shadow
  • column-rule-color
  • outline-color
  • text-decoration-color
  • text-shadow
PREVIOUS NEXT
ADVERTISEMENTS

LEARNING IS A CONTINOUS PROCESS - PRACTICE MAKES PERFECT