{"id":35,"date":"2024-10-21T04:32:27","date_gmt":"2024-10-21T04:32:27","guid":{"rendered":"https:\/\/techkubo.com\/css\/?p=35"},"modified":"2025-05-12T12:45:18","modified_gmt":"2025-05-12T12:45:18","slug":"css-colors","status":"publish","type":"post","link":"https:\/\/techkubo.com\/css\/css-colors\/","title":{"rendered":"CSS Colors"},"content":{"rendered":"\n

Colors are one of the most commonly used style properties in CSS. You can apply colors to a wide range of elements, including text, borders, and backgrounds. In CSS, you use the color<\/code> property for text color and the background-color<\/code> property for background color.<\/p>\n\n\n\n

Text Color Example:<\/strong><\/p>\n\n\n\n

p {\n  color: blue;\n}<\/pre><\/div>\n\n\n\n
Background Color Example: <\/strong><\/p>\n\n\n\n
body {\n  background-color: lightgray;\n}<\/pre><\/div>\n\n\n\n
<\/p>\n\n\n\n
CSS Color Formats<\/strong><\/h2>\n\n\n\n
1. Color Keywords<\/strong><\/p>\n\n\n\n
CSS provides basic color keywords like red<\/code>, blue<\/code>, green<\/code>, black<\/code>, white<\/code>, etc. This is the easiest method for applying basic colors.<\/p>\n\n\n\n
h1 {\n  color: red;\n}<\/pre><\/div>\n\n\n\n
2. HEX Color Codes<\/strong><\/p>\n\n\n\n
A HEX color code is a six-digit code representing a color, starting with a #<\/code>. Each pair of digits represents the intensity of red, green, and blue (RGB), ranging from 00 to FF.<\/p>\n\n\n\n
p {\n  color: #3498db; \/* A shade of blue *\/\n}<\/pre><\/div>\n\n\n\n
    \n
  • #3498db<\/code> is broken down as:\n
      \n
    • 34<\/code> (red),<\/li>\n\n\n\n
    • 98<\/code> (green),<\/li>\n\n\n\n
    • db<\/code> (blue).<\/li>\n<\/ul>\n<\/li>\n<\/ul>\n\n\n\n
      3. RGB Color<\/strong><\/p>\n\n\n\n
      The RGB format allows you to specify a color using its red, green, and blue components, with values ranging from 0 to 255.<\/p>\n\n\n\n
      h2 {\n  color: rgb(255, 99, 71); \/* A shade of red *\/\n}<\/pre><\/div>\n\n\n\n
        \n
      • This example represents Tomato Red<\/strong> with:\n
          \n
        • 255<\/code> for red,<\/li>\n\n\n\n
        • 99<\/code> for green,<\/li>\n\n\n\n
        • 71<\/code> for blue.<\/li>\n<\/ul>\n<\/li>\n<\/ul>\n\n\n\n
          4. RGBA (RGB with Alpha)<\/strong><\/p>\n\n\n\n
          RGBA is similar to RGB but with an added alpha (opacity) value. The alpha value ranges from 0 (completely transparent) to 1 (fully opaque).<\/p>\n\n\n\n
          div {\n  background-color: rgba(0, 0, 0, 0.5); \/* 50% transparent black *\/\n}<\/pre><\/div>\n\n\n\n
          5. HSL Color <\/strong><\/p>\n\n\n\n
          HSL stands for Hue, Saturation, and Lightness. Hue is a degree on the color wheel (0-360), saturation is a percentage (0% is grayscale, 100% is full color), and lightness is also a percentage (0% is black, 100% is white).<\/p>\n\n\n\n
          body {\n  background-color: hsl(120, 100%, 50%); \/* Pure green *\/\n}<\/pre><\/div>\n\n\n\n
          6. HSLA (HSL with Alpha)<\/strong><\/p>\n\n\n\n
          Similar to RGBA, HSLA adds an alpha value for transparency.<\/p>\n\n\n\n
          section {\n  background-color: hsla(120, 100%, 50%, 0.5); \/* 50% transparent green *\/\n}<\/pre><\/div>\n\n\n\n
          <\/p>\n\n\n\n
          CSS Colors Using Different Color Formats<\/strong><\/h2>\n\n\n\n
          <!DOCTYPE html>\n<html>\n<head>\n  <style>\n    \/* Using color keywords *\/\n    h1 {\n      color: darkblue;\n    }\n\n    \/* Using HEX color *\/\n    p {\n      color: #ff6347; \/* Tomato *\/\n    }\n\n    \/* Using RGB color *\/\n    h2 {\n      color: rgb(60, 179, 113); \/* Medium Sea Green *\/\n    }\n\n    \/* Using RGBA with transparency *\/\n    div {\n      background-color: rgba(255, 255, 0, 0.3); \/* Transparent Yellow *\/\n    }\n\n    \/* Using HSL color *\/\n    footer {\n      background-color: hsl(240, 100%, 50%); \/* Blue *\/\n    }\n  <\/style>\n<\/head>\n<body>\n\n  <h1>Welcome to CSS Colors<\/h1>\n  <p>This is an example of using different color formats in CSS.<\/p>\n\n  <h2>This is a heading with RGB color<\/h2>\n  <div>This div has a transparent background.<\/div>\n\n  <footer>This footer uses HSL color for its background.<\/footer>\n\n<\/body>\n<\/html><\/pre><\/div>\n\n\n\n
          \"\"<\/figure>\n\n\n\n
          <\/p>\n\n\n\n
          Choosing the Right Color Format<\/strong><\/h2>\n\n\n\n
          Keywords: <\/strong><\/p>\n\n\n\n
            \n
          • HEX<\/strong>: Commonly used in web design and supported by all browsers.<\/li>\n\n\n\n
          • RGB\/RGBA<\/strong>: Great for fine-tuning colors with more precision.<\/li>\n\n\n\n
          • HSL\/HSLA<\/strong>: Intuitive for adjusting hue, saturation, and lightness values.<\/li>\n<\/ul>\n\n\n\n
            <\/p>\n\n\n\n
            CSS Labs<\/strong><\/h2>\n\n\n\n