HTML Color

    To colour a specific HTML element content, we need to use the style attribute. The style attribute can colour the content, its background and even its border with the help of CSS properties and values. We can use different formats such as RGB code, HEX, HSL, RGBA, HSLA for property values.

    Colour Names

    For straightforward properties, we generally use the colour name, and there are more 140 standard colours present in CSS.

    Example

    <p style ="color: green; "> It's Green</p>

    Output

    It's Green

    We can also use the hex code to represent the colour value.

    Example

    The hex code for green is #008000

    <p style ="color: #008000; "> It's Green</p>

    Output

    It's Green

    Major Colours with their hex code

    Colour Name Hex Code
    Alice Blue #F0F8FF
    Black #000000
    Blue #00000FF
    BlueVoilet #8A2BE2
    Brown #A52A2A
    Chocolate #D2691E
    Crimson #DC143C
    DarkGray #A9A9A9
    DarkGreen #006400
    DarkOrange #FF8C00
    DarkRed #8B0000
    ForestGreen #228B22
    Gold #FFD700
    Khaki #F0E68C
    Lime #00FF00
    Navy #000080
    Orange #FFA500
    Pink #FFC0CB
    Red #FF0000
    Silver #C0C0C0
    White #FFFFFF
    Yellow #FFFF00

    Change Background Colour

    By default the background colour of every element content is white, but it can be changed through style attribute and background-color property. We can either use the colour name or its hex code as the property value.

    Example

    <h1 style="background-color:Gold;">TechGeekBuzz</h1>
    
    <p style = "background-color: black; color: #FFFFFF; "> Welcome to 
    TechGeekBuzz</p>

    Output

    TechGeekBuzz

    Welcome to TechGeekBuzz

    Colour Text

    To colour an element text content, we can simply use the style attribute's color property.

    Example

    <h2 style =" color: Tomato;"> HTML</h2>
    
    <blockquote cite ="https://www.techgeekbuzz.com/html-full-form/" 
    style="color: #FFA500;">
    HTML abbreviates for hypertext markup language built to develop web pages and is coded or written in the 
    established HTML components. Hyperlink refers to a wide array of a network in a page onto other pages. Markup
    language attribute to tags that are applied to best describe a page layout and components within the page. The 
    central point of focus is how the information is going to be shown on the web-pages. HTML documents are 
    understood and are visible to us via the web browsers
    <blockquote>

    Output

    HTML

    HTML abbreviates for hypertext markup language built to develop web pages and is coded or written in the established HTML components. Hyperlink refers to a wide array of a network in a page onto other pages. Markup language attribute to tags that are applied to best describe a page layout and components within the page. The central point of focus is how the information is going to be shown on the web-pages. HTML documents are understood and are visible to us via the web browsers

    Bodor Colour

    By default, the border of an element text is white, so you usually do not notice that a boundary. However, we can change the border colour of any text using the border property.

    Example

    <h3 style="border: 2px solid Green;">TechGeekBuzz</h3>

    Output

    TechGeekBuzz

    Colour Values

    There are five different ways we can specify the colour value.

    • By name
    • by rgb() function
    • by hex code
    • by rgba() function
    • by hsl() function

    you can simply google the different values to represent the colour.

    Example

    <p style="color : red" > Red Colour<p> 
    <p style="color : rbg(255, 0, 0);" > Red Colour<p> 
    <p style="color : #FF0000" > Red Colour<p> 
    <p style="color : rgba(255, 0, 0, 1)" > Red Colour<p> 
    <p style="color :hsl(0, 100%, 50%) " > Red Colour<p>

    Output

    Red Colour

    Red Colour

    Red Colour

    Red Colour

    Red Colour

    Summary

    • color is a property of CSS.
    • Various properties can be used to alter the colour of the text element.
    • color Value can be represented using many methods.
    • Its always recommend using hex code for colour values.