CSS PortalCSS Portal
Menu
  • CSS Generators
  • CSS Resources
  • CSS Tools
  • HTML Resources
  • Blog
  1. Home
  2. CSS Functions
  3. hsl() CSS Function

hsl() CSS Function

Description

The hsl() CSS function is used to set a color value in CSS. The hsl() function takes three values, they are: hue, saturation, and lightness.

Syntax

hsl() = hsl( <hue>, <saturation>, <lightness> )

Values

  • huerepresents an angle of the color circle. You can specify the value as an angle in degrees (e.g. 180deg) or simply as a number (e.g. 180). For example, blue is at 240 degrees, so it could be written as either 240deg or 240. By definition, red=0°=360°, with the other colors spread around the circle, so green=120°, blue=240°, etc.
  • saturationsaturation is expressed as a percentage. It represents the amount of saturation in the color. For example, 100% is fully saturated (more colorful and intense), while 0 is a fully-unsaturated gray.
  • lightnesslightness is also expressed as a percentage. It represents the amount of light in the color. For lightness, 50% is the "normal" setting, while 100% is white and 0% is black.

Example

<div class='hsl'>This is an example of the hsl() function.</div>
.hsl {
background-color: hsl(240, 100%, 50%);
color: white;
border: 2px solid red;
margin: 20px;
padding: 20px;
text-align: center;
}

Browser Support

Desktop
Explorer Edge Chrome Firefox Opera Safari
912119.53.1
Tablets / Mobile
Android Chrome Firefox Opera Safari Samsung
≤37184Yes2Yes

Last updated by CSSPortal on: 1st December 2019


Share this Page

If you have enjoyed using CSSPortal, please consider sharing this page with other users, just click on your preferred social media link or copy the webpage from the link below.

URL
Sidebar

CSS & HTML References

  • CSS At-Rules
    • @charset
    • @document
    • @font-face
    • @import
    • @keyframes
    • @media
    • @namespace
    • @page
    • @supports
    • @viewport
  • CSS Data Types
    • angle
    • basic-shape
    • blend-mode
    • color
    • frequency
    • gradient
    • image
    • integer
    • length
    • number
    • percentage
    • position
    • ratio
    • resolution
    • string
    • time
    • url
  • CSS Functions
    • attr
    • blur
    • brightness
    • calc
    • circle
    • contrast
    • drop-shadow
    • ellipse
    • grayscale
    • hsl
    • hsla
    • hue-rotate
    • inset
    • invert
    • linear-gradient
    • matrix
    • matrix3d
    • opacity
    • perspective
    • polygon
    • radial-gradient
    • repeating-linear-gradient
    • repeating-radial-gradient
    • rgb
    • rgba
    • rotate
    • rotate3d
    • rotateX
    • rotateY
    • rotateZ
    • saturate
    • scale
    • scale3d
    • scaleX
    • scaleY
    • scaleZ
    • sepia
    • skew
    • skewX
    • skewY
    • translate
    • translate3d
    • translateX
    • translateY
    • translateZ
  • CSS Properties
    • align-content
    • align-items
    • align-self
    • all
    • animation
    • animation-delay
    • animation-direction
    • animation-duration
    • animation-fill-mode
    • animation-iteration-count
    • animation-name
    • animation-play-state
    • animation-timing-function
    • backface-visibility
    • background
    • background-attachment
    • background-blend-mode
    • background-clip
    • background-color
    • background-image
    • background-origin
    • background-position
    • background-repeat
    • background-size
    • border
    • border-bottom
    • border-bottom-color
    • border-bottom-left-radius
    • border-bottom-right-radius
    • border-bottom-style
    • border-bottom-width
    • border-collapse
    • border-color
    • border-image
    • border-image-outset
    • border-image-repeat
    • border-image-slice
    • border-image-source
    • border-image-width
    • border-left
    • border-left-color
    • border-left-style
    • border-left-width
    • border-radius
    • border-right
    • border-right-color
    • border-right-style
    • border-right-width
    • border-spacing
    • border-style
    • border-top
    • border-top-color
    • border-top-left-radius
    • border-top-right-radius
    • border-top-style
    • border-top-width
    • border-width
    • bottom
    • box-decoration-break
    • box-shadow
    • box-sizing
    • break-after
    • break-before
    • break-inside
    • caption-side
    • caret-color
    • clear
    • clip-path
    • color
    • column-count
    • column-fill
    • column-rule
    • column-rule-color
    • column-rule-style
    • column-rule-width
    • column-span
    • column-width
    • columns
    • content
    • counter-increment
    • counter-reset
    • counter-set
    • cursor
    • direction
    • display
    • empty-cells
    • filter
    • flex
    • flex-basis
    • flex-direction
    • flex-flow
    • flex-grow
    • flex-shrink
    • flex-wrap
    • float
    • font
    • font-family
    • font-feature-settings
    • font-kerning
    • font-language-override
    • font-size
    • font-size-adjust
    • font-stretch
    • font-style
    • font-synthesis
    • font-variant
    • font-variant-alternates
    • font-variant-caps
    • font-variant-east-asian
    • font-variant-ligatures
    • font-variant-numeric
    • font-variant-position
    • font-weight
    • grid
    • grid-area
    • grid-auto-columns
    • grid-auto-flow
    • grid-auto-rows
    • grid-column
    • grid-column-end
    • grid-column-gap
    • grid-column-start
    • grid-gap
    • grid-row
    • grid-row-end
    • grid-row-gap
    • grid-row-start
    • grid-template
    • grid-template-areas
    • grid-template-columns
    • grid-template-rows
    • hanging-punctuation
    • height
    • hyphens
    • image-orientation
    • justify-content
    • justify-items
    • justify-self
    • left
    • letter-spacing
    • line-break
    • line-height
    • list-style
    • list-style-image
    • list-style-position
    • list-style-type
    • margin
    • margin-bottom
    • margin-left
    • margin-right
    • margin-top
    • max-height
    • max-width
    • min-height
    • min-width
    • mix-blend-mode
    • object-fit
    • object-position
    • opacity
    • order
    • orphans
    • outline
    • outline-color
    • outline-offset
    • outline-style
    • outline-width
    • overflow
    • overflow-wrap
    • overflow-x
    • overflow-y
    • padding
    • padding-bottom
    • padding-left
    • padding-right
    • padding-top
    • perspective
    • perspective-origin
    • place-content
    • place-items
    • place-self
    • position
    • quotes
    • resize
    • right
    • shape-image-threshold
    • shape-margin
    • shape-outside
    • tab-size
    • table-layout
    • text-align
    • text-align-last
    • text-combine-upright
    • text-decoration
    • text-decoration-color
    • text-decoration-line
    • text-decoration-style
    • text-emphasis
    • text-emphasis-color
    • text-emphasis-position
    • text-emphasis-style
    • text-indent
    • text-justify
    • text-orientation
    • text-overflow
    • text-shadow
    • text-transform
    • text-underline-position
    • top
    • transform
    • transform-origin
    • transform-style
    • transition
    • transition-delay
    • transition-duration
    • transition-property
    • transition-timing-function
    • unicode-bidi
    • vertical-align
    • visibility
    • white-space
    • widows
    • width
    • word-break
    • word-spacing
    • word-wrap
    • writing-mode
    • z-index
  • CSS Pseudo Classes
    • :active
    • :checked
    • :default
    • :disabled
    • :empty
    • :enabled
    • :first-child
    • :first-of-type
    • :focus
    • :fullscreen
    • :hover
    • :in-range
    • :indeterminate
    • :invalid
    • :lang
    • :last-child
    • :last-of-type
    • :link
    • :not
    • :nth-child
    • :nth-last-child
    • :nth-last-of-type
    • :nth-of-type
    • :only-child
    • :only-of-type
    • :optional
    • :out-of-range
    • :read-only
    • :read-write
    • :required
    • :root
    • :target
    • :valid
    • :visited
  • CSS Pseudo Elements
    • ::after
    • ::before
    • ::first-letter
    • ::first-line
    • ::placeholder
    • ::selection
  • HTML Tags
    • a
    • abbr
    • address
    • area
    • article
    • aside
    • audio
    • b
    • base
    • bdi
    • bdo
    • blockquote
    • body
    • br
    • button
    • canvas
    • caption
    • cite
    • code
    • col
    • colgroup
    • comment
    • datalist
    • dd
    • del
    • details
    • dfn
    • dialog
    • div
    • dl
    • doctype
    • dt
    • em
    • embed
    • fieldset
    • figcaption
    • figure
    • footer
    • form
    • h1
    • h2
    • h3
    • h4
    • h5
    • h6
    • head
    • header
    • hr
    • html
    • i
    • iframe
    • img
    • input
    • ins
    • kbd
    • keygen
    • label
    • legend
    • li
    • link
    • map
    • mark
    • menu
    • meta
    • meter
    • nav
    • noscript
    • object
    • ol
    • optgroup
    • option
    • output
    • p
    • param
    • picture
    • pre
    • progress
    • q
    • rp
    • rt
    • ruby
    • s
    • samp
    • script
    • section
    • select
    • small
    • source
    • span
    • strong
    • style
    • sub
    • summary
    • sup
    • table
    • tbody
    • td
    • textarea
    • tfoot
    • th
    • thead
    • time
    • title
    • tr
    • track
    • u
    • ul
    • var
    • video
    • wbr
  • Sponsors
  • Learn Wordpress
    Wordpress hosting. Theme and plugin reviews. Wordpress development tips.
    Templatic
    Wordpress Themes, Cloud Hosting, Backups and Webmaster Tips.
    A2 Web Hosting
    Shared hosting, Reseller hosting, Cloud hosting, Dedicated hosting.
    Online Password Manager
    Access your passwords from any computer, no need to remember all of your passwords.
    Advertise Here
    Advertise your company and products here!

    About CSSPortal

    CSS Portal is home to many examples of CSS and how it can be used in website design. Here you'll find all CSS properties and many CSS generators to help with all your design needs.

    Friends

    • Expand URL
    • Password Manager
    • Website Tools & Generators

    CSSPortal

    • Donate to CSSPortal
    • Privacy Policy
    • Contact Us
    • CSS Blog

    Copyright © 2022, CSSPortal.com All rights reserved.