- CSS: Cascading Style Sheets - MDN Web Docs

Trang chủ » Html Color Codes Rgba » - CSS: Cascading Style Sheets - MDN Web Docs

Có thể bạn quan tâm

  1. References
  2. CSS
  3. <color>
Article Actions
  • English (US)
    • Remember language
    • Deutsch
    • Español
    • Français
    • 日本語
    • 한국어
    • Português (do Brasil)
    • Русский
    • 中文 (简体)
  • Syntax
  • Interpolation
  • Accessibility
  • Formal syntax
  • Examples
  • Specifications
  • Browser compatibility
  • See also
  1. CSS
  2. Beginner's tutorials
  3. Your first website: Styling the content
  4. CSS styling basics
    1. What is CSS?
    2. Getting started with CSS
    3. Challenge: Styling a biography page
    4. Basic CSS selectors
    5. Attribute selectors
    6. Pseudo-classes and pseudo-elements
    7. Combinators
    8. The box model
    9. Handling conflicts
    10. CSS values and units
    11. Sizing items in CSS
    12. Backgrounds and borders
    13. Overflowing content
    14. Images, media, and form elements
    15. Styling tables
    16. Debugging CSS
    17. Challenge: Fundamental CSS comprehension
    18. Challenge: Creating fancy letterheaded paper
    19. Challenge: A cool-looking box
  5. CSS text styling
    1. Fundamental text and font styling
    2. Styling lists
    3. Styling links
    4. Web fonts
    5. Challenge: Typesetting a community school homepage
  6. CSS layout
    1. Introduction to CSS layout
    2. Floats
    3. Positioning
    4. Flexbox
    5. CSS grid layout
    6. Responsive design
    7. Media query fundamentals
    8. Challenge: Fundamental layout comprehension
  7. CSS reference
  8. Modules
    1. CSS anchor positioning
    2. CSS animations
    3. CSS backgrounds and borders
    4. CSS basic user interface
    5. CSS box alignment
    6. CSS box model
    7. CSS box sizing
    8. CSS cascade and inheritance
    9. CSS color adjustment
    10. CSS colors
    11. CSS compositing and blending
    12. CSS conditional rules
    13. CSS containment
    14. CSS counter styles
    15. CSS custom properties for cascading variables
    16. CSS display
    17. CSS filter effects
    18. CSS flexible box layout
    19. CSS font loading
    20. CSS fonts
    21. CSS fragmentation
    22. CSS generated content
    23. CSS grid layout
    24. CSS images
    25. CSS inline layout
    26. CSS lists and counters
    27. CSS logical properties and values
    28. CSS masking
    29. CSS media queries
    30. CSS motion path
    31. CSS multi-column layout
    32. CSS namespaces
    33. CSS nesting
    34. CSS overflow
    35. CSS overscroll behavior
    36. CSS paged media
    37. CSS positioned layout
    38. CSS properties and values API
    39. CSS pseudo-elements
    40. CSS ruby layout
    41. CSS scoping
    42. CSS scroll snap
    43. CSS scroll-driven animations
    44. CSS scrollbars styling
    45. CSS selectors
    46. CSS shadow parts
    47. CSS shapes
    48. CSS syntax
    49. CSS table
    50. CSS text
    51. CSS text decoration
    52. CSS transforms
    53. CSS transitions
    54. CSS view transitions
    55. CSS writing modes
    56. CSSOM view
  9. Properties
    1. -moz-*
      1. -moz-float-edge Non-standard Deprecated
      2. -moz-force-broken-image-icon Non-standard Deprecated
      3. -moz-image-region Non-standard
      4. -moz-orient Non-standard
      5. -moz-user-focus Non-standard Deprecated
      6. -moz-user-input Non-standard Deprecated
    2. -webkit-*
      1. -webkit-border-before Non-standard
      2. -webkit-box-reflect Non-standard
      3. -webkit-line-clamp
      4. -webkit-mask-box-image Non-standard
      5. -webkit-mask-composite Non-standard
      6. -webkit-mask-position-x Non-standard
      7. -webkit-mask-position-y Non-standard
      8. -webkit-mask-repeat-x Non-standard
      9. -webkit-mask-repeat-y Non-standard
      10. -webkit-tap-highlight-color Non-standard
      11. -webkit-text-fill-color
      12. -webkit-text-security Non-standard
      13. -webkit-text-stroke
      14. -webkit-text-stroke-color
      15. -webkit-text-stroke-width
      16. -webkit-touch-callout Non-standard
    3. accent-color
    4. align-*
      1. align-content
      2. align-items
      3. align-self
    5. all
    6. anchor-name Experimental
    7. animation-*
      1. animation
      2. animation-composition
      3. animation-delay
      4. animation-direction
      5. animation-duration
      6. animation-fill-mode
      7. animation-iteration-count
      8. animation-name
      9. animation-play-state
      10. animation-range Experimental
      11. animation-range-end Experimental
      12. animation-range-start Experimental
      13. animation-timeline Experimental
      14. animation-timing-function
    8. appearance
    9. aspect-ratio
    10. backdrop-filter
    11. backface-visibility
    12. background-*
      1. background
      2. background-attachment
      3. background-blend-mode
      4. background-clip
      5. background-color
      6. background-image
      7. background-origin
      8. background-position
      9. background-position-x
      10. background-position-y
      11. background-repeat
      12. background-size
    13. block-size
    14. border-*
      1. border
      2. border-block
      3. border-block-color
      4. border-block-end
      5. border-block-end-color
      6. border-block-end-style
      7. border-block-end-width
      8. border-block-start
      9. border-block-start-color
      10. border-block-start-style
      11. border-block-start-width
      12. border-block-style
      13. border-block-width
      14. border-bottom
      15. border-bottom-color
      16. border-bottom-left-radius
      17. border-bottom-right-radius
      18. border-bottom-style
      19. border-bottom-width
      20. border-collapse
      21. border-color
      22. border-end-end-radius
      23. border-end-start-radius
      24. border-image
      25. border-image-outset
      26. border-image-repeat
      27. border-image-slice
      28. border-image-source
      29. border-image-width
      30. border-inline
      31. border-inline-color
      32. border-inline-end
      33. border-inline-end-color
      34. border-inline-end-style
      35. border-inline-end-width
      36. border-inline-start
      37. border-inline-start-color
      38. border-inline-start-style
      39. border-inline-start-width
      40. border-inline-style
      41. border-inline-width
      42. border-left
      43. border-left-color
      44. border-left-style
      45. border-left-width
      46. border-radius
      47. border-right
      48. border-right-color
      49. border-right-style
      50. border-right-width
      51. border-spacing
      52. border-start-end-radius
      53. border-start-start-radius
      54. border-style
      55. border-top
      56. border-top-color
      57. border-top-left-radius
      58. border-top-right-radius
      59. border-top-style
      60. border-top-width
      61. border-width
    15. bottom
    16. box-*
      1. box-align Non-standard Deprecated
      2. box-decoration-break
      3. box-direction Non-standard Deprecated
      4. box-flex Non-standard Deprecated
      5. box-flex-group Non-standard Deprecated
      6. box-lines Non-standard Deprecated
      7. box-ordinal-group Non-standard Deprecated
      8. box-orient Non-standard Deprecated
      9. box-pack Non-standard Deprecated
      10. box-shadow
      11. box-sizing
    17. break-*
      1. break-after
      2. break-before
      3. break-inside
    18. caption-side
    19. caret-color
    20. clear
    21. clip-*
      1. clip Deprecated
      2. clip-path
      3. clip-rule
    22. color-*
      1. color
      2. color-interpolation
      3. color-interpolation-filters
      4. color-scheme
    23. column-*
      1. column-count
      2. column-fill
      3. column-gap
      4. column-rule
      5. column-rule-color
      6. column-rule-style
      7. column-rule-width
      8. column-span
      9. column-width
    24. columns
    25. contain-*
      1. contain
      2. contain-intrinsic-block-size
      3. contain-intrinsic-height
      4. contain-intrinsic-inline-size
      5. contain-intrinsic-size
      6. contain-intrinsic-width
    26. container-*
      1. container
      2. container-name
      3. container-type
    27. content
    28. content-visibility
    29. counter-*
      1. counter-increment
      2. counter-reset
      3. counter-set
    30. cursor
    31. cx
    32. cy
    33. d
    34. direction
    35. display
    36. dominant-baseline
    37. empty-cells
    38. field-sizing Experimental
    39. fill-*
      1. fill
      2. fill-opacity
      3. fill-rule
    40. filter
    41. flex-*
      1. flex
      2. flex-basis
      3. flex-direction
      4. flex-flow
      5. flex-grow
      6. flex-shrink
      7. flex-wrap
    42. float
    43. flood-color
    44. flood-opacity
    45. font-*
      1. font
      2. font-family
      3. font-feature-settings
      4. font-kerning
      5. font-language-override
      6. font-optical-sizing
      7. font-palette
      8. font-size
      9. font-size-adjust
      10. font-smooth Non-standard
      11. font-stretch
      12. font-style
      13. font-synthesis
      14. font-synthesis-position Experimental
      15. font-synthesis-small-caps
      16. font-synthesis-style
      17. font-synthesis-weight
      18. font-variant
      19. font-variant-alternates
      20. font-variant-caps
      21. font-variant-east-asian
      22. font-variant-emoji
      23. font-variant-ligatures
      24. font-variant-numeric
      25. font-variant-position
      26. font-variation-settings
      27. font-weight
    46. forced-color-adjust
    47. gap
    48. grid-*
      1. grid
      2. grid-area
      3. grid-auto-columns
      4. grid-auto-flow
      5. grid-auto-rows
      6. grid-column
      7. grid-column-end
      8. grid-column-start
      9. grid-row
      10. grid-row-end
      11. grid-row-start
      12. grid-template
      13. grid-template-areas
      14. grid-template-columns
      15. grid-template-rows
    49. hanging-punctuation
    50. height
    51. hyphenate-character
    52. hyphenate-limit-chars
    53. hyphens
    54. image-*
      1. image-orientation
      2. image-rendering
      3. image-resolution Experimental
    55. initial-letter
    56. inline-size
    57. inset-*
      1. inset
      2. inset-block
      3. inset-block-end
      4. inset-block-start
      5. inset-inline
      6. inset-inline-end
      7. inset-inline-start
    58. interpolate-size Experimental
    59. isolation
    60. justify-*
      1. justify-content
      2. justify-items
      3. justify-self
    61. left
    62. letter-spacing
    63. lighting-color
    64. line-*
      1. line-break
      2. line-height
      3. line-height-step Experimental
    65. list-*
      1. list-style
      2. list-style-image
      3. list-style-position
      4. list-style-type
    66. margin-*
      1. margin
      2. margin-block
      3. margin-block-end
      4. margin-block-start
      5. margin-bottom
      6. margin-inline
      7. margin-inline-end
      8. margin-inline-start
      9. margin-left
      10. margin-right
      11. margin-top
      12. margin-trim Experimental
    67. marker-*
      1. marker
      2. marker-end
      3. marker-mid
      4. marker-start
    68. mask-*
      1. mask
      2. mask-border
      3. mask-border-mode
      4. mask-border-outset
      5. mask-border-repeat
      6. mask-border-slice
      7. mask-border-source
      8. mask-border-width
      9. mask-clip
      10. mask-composite
      11. mask-image
      12. mask-mode
      13. mask-origin
      14. mask-position
      15. mask-repeat
      16. mask-size
      17. mask-type
    69. math-*
      1. math-depth
      2. math-shift Experimental
      3. math-style
    70. max-*
      1. max-block-size
      2. max-height
      3. max-inline-size
      4. max-width
    71. min-*
      1. min-block-size
      2. min-height
      3. min-inline-size
      4. min-width
    72. mix-blend-mode
    73. object-fit
    74. object-position
    75. offset-*
      1. offset
      2. offset-anchor
      3. offset-distance
      4. offset-path
      5. offset-position
      6. offset-rotate
    76. opacity
    77. order
    78. orphans
    79. outline-*
      1. outline
      2. outline-color
      3. outline-offset
      4. outline-style
      5. outline-width
    80. overflow-*
      1. overflow
      2. overflow-anchor
      3. overflow-block
      4. overflow-clip-margin
      5. overflow-inline
      6. overflow-wrap
      7. overflow-x
      8. overflow-y
    81. overlay Experimental
    82. overscroll-*
      1. overscroll-behavior
      2. overscroll-behavior-block
      3. overscroll-behavior-inline
      4. overscroll-behavior-x
      5. overscroll-behavior-y
    83. padding-*
      1. padding
      2. padding-block
      3. padding-block-end
      4. padding-block-start
      5. padding-bottom
      6. padding-inline
      7. padding-inline-end
      8. padding-inline-start
      9. padding-left
      10. padding-right
      11. padding-top
    84. page-*
      1. page
      2. page-break-after
      3. page-break-before
      4. page-break-inside
    85. paint-order
    86. perspective
    87. perspective-origin
    88. place-*
      1. place-content
      2. place-items
      3. place-self
    89. pointer-events
    90. position-*
      1. position
      2. position-anchor Experimental
      3. position-area Experimental
      4. position-try Experimental
      5. position-try-fallbacks Experimental
      6. position-try-order Experimental
      7. position-visibility Experimental
    91. print-color-adjust
    92. quotes
    93. r
    94. resize
    95. right
    96. rotate
    97. row-gap
    98. ruby-align
    99. ruby-position
    100. rx
    101. ry
    102. scale
    103. scroll-*
      1. scroll-behavior
      2. scroll-margin
      3. scroll-margin-block
      4. scroll-margin-block-end
      5. scroll-margin-block-start
      6. scroll-margin-bottom
      7. scroll-margin-inline
      8. scroll-margin-inline-end
      9. scroll-margin-inline-start
      10. scroll-margin-left
      11. scroll-margin-right
      12. scroll-margin-top
      13. scroll-padding
      14. scroll-padding-block
      15. scroll-padding-block-end
      16. scroll-padding-block-start
      17. scroll-padding-bottom
      18. scroll-padding-inline
      19. scroll-padding-inline-end
      20. scroll-padding-inline-start
      21. scroll-padding-left
      22. scroll-padding-right
      23. scroll-padding-top
      24. scroll-snap-align
      25. scroll-snap-stop
      26. scroll-snap-type
      27. scroll-timeline Experimental
      28. scroll-timeline-axis Experimental
      29. scroll-timeline-name Experimental
    104. scrollbar-*
      1. scrollbar-color
      2. scrollbar-gutter
      3. scrollbar-width
    105. shape-*
      1. shape-image-threshold
      2. shape-margin
      3. shape-outside
      4. shape-rendering
    106. stop-color
    107. stop-opacity
    108. stroke-*
      1. stroke
      2. stroke-dasharray
      3. stroke-dashoffset
      4. stroke-linecap
      5. stroke-linejoin
      6. stroke-miterlimit
      7. stroke-opacity
      8. stroke-width
    109. tab-size
    110. table-layout
    111. text-*
      1. text-align
      2. text-align-last
      3. text-anchor
      4. text-combine-upright
      5. text-decoration
      6. text-decoration-color
      7. text-decoration-line
      8. text-decoration-skip Experimental
      9. text-decoration-skip-ink
      10. text-decoration-style
      11. text-decoration-thickness
      12. text-emphasis
      13. text-emphasis-color
      14. text-emphasis-position
      15. text-emphasis-style
      16. text-indent
      17. text-justify
      18. text-orientation
      19. text-overflow
      20. text-rendering
      21. text-shadow
      22. text-size-adjust Experimental
      23. text-spacing-trim Experimental
      24. text-transform
      25. text-underline-offset
      26. text-underline-position
      27. text-wrap
      28. text-wrap-mode
      29. text-wrap-style
    112. timeline-scope Experimental
    113. top
    114. touch-action
    115. transform-*
      1. transform
      2. transform-box
      3. transform-origin
      4. transform-style
    116. transition-*
      1. transition
      2. transition-behavior
      3. transition-delay
      4. transition-duration
      5. transition-property
      6. transition-timing-function
    117. translate
    118. unicode-bidi
    119. user-modify Non-standard Deprecated
    120. user-select
    121. vector-effect
    122. vertical-align
    123. view-*
      1. view-timeline Experimental
      2. view-timeline-axis Experimental
      3. view-timeline-inset Experimental
      4. view-timeline-name Experimental
      5. view-transition-name
    124. visibility
    125. white-space
    126. white-space-collapse
    127. widows
    128. width
    129. will-change
    130. word-break
    131. word-spacing
    132. writing-mode
    133. x
    134. y
    135. z-index
    136. zoom
  10. Selectors
    1. & nesting selector
    2. Attribute selectors
    3. Class selectors
    4. ID selectors
    5. Type selectors
    6. Universal selectors
  11. Combinators
    1. Child combinator
    2. Column combinator Experimental
    3. Descendant combinator
    4. Namespace separator
    5. Next-sibling combinator
    6. Selector list
    7. Subsequent-sibling combinator
  12. Pseudo-classes
    1. :-moz-broken Non-standard Deprecated
    2. :-moz-drag-over Non-standard
    3. :-moz-first-node Experimental Non-standard
    4. :-moz-handler-blocked Non-standard
    5. :-moz-handler-crashed Non-standard
    6. :-moz-handler-disabled Non-standard
    7. :-moz-last-node Experimental Non-standard
    8. :-moz-loading Non-standard
    9. :-moz-locale-dir(ltr) Non-standard
    10. :-moz-locale-dir(rtl) Non-standard
    11. :-moz-only-whitespace Non-standard
    12. :-moz-submit-invalid Non-standard
    13. :-moz-suppressed Non-standard
    14. :-moz-user-disabled Non-standard
    15. :-moz-window-inactive Non-standard
    16. :active
    17. :any-link
    18. :autofill
    19. :blank Experimental
    20. :buffering
    21. :checked
    22. :current Experimental
    23. :default
    24. :defined
    25. :dir()
    26. :disabled
    27. :empty
    28. :enabled
    29. :first
    30. :first-child
    31. :first-of-type
    32. :focus
    33. :focus-visible
    34. :focus-within
    35. :fullscreen
    36. :future
    37. :has-slotted Experimental
    38. :has()
    39. :host
    40. :host-context()
    41. :host()
    42. :hover
    43. :in-range
    44. :indeterminate
    45. :invalid
    46. :is()
    47. :lang()
    48. :last-child
    49. :last-of-type
    50. :left
    51. :link
    52. :local-link Experimental
    53. :modal
    54. :muted
    55. :not()
    56. :nth-child()
    57. :nth-last-child()
    58. :nth-last-of-type()
    59. :nth-of-type()
    60. :only-child
    61. :only-of-type
    62. :optional
    63. :out-of-range
    64. :past
    65. :paused
    66. :picture-in-picture
    67. :placeholder-shown
    68. :playing
    69. :popover-open
    70. :read-only
    71. :read-write
    72. :required
    73. :right
    74. :root
    75. :scope
    76. :seeking
    77. :stalled
    78. :state()
    79. :target
    80. :target-within Experimental
    81. :user-invalid
    82. :user-valid
    83. :valid
    84. :visited
    85. :volume-locked
    86. :where()
  13. Pseudo-elements
    1. ::-moz-color-swatch Non-standard
    2. ::-moz-focus-inner Experimental Non-standard
    3. ::-moz-list-bullet Experimental Non-standard
    4. ::-moz-list-number Experimental Non-standard
    5. ::-moz-meter-bar Non-standard
    6. ::-moz-progress-bar Experimental Non-standard
    7. ::-moz-range-progress Non-standard
    8. ::-moz-range-thumb Non-standard
    9. ::-moz-range-track Non-standard
    10. ::-webkit-inner-spin-button Non-standard
    11. ::-webkit-meter-bar Non-standard Deprecated
    12. ::-webkit-meter-even-less-good-value Non-standard
    13. ::-webkit-meter-inner-element Non-standard
    14. ::-webkit-meter-optimum-value Non-standard
    15. ::-webkit-meter-suboptimum-value Non-standard
    16. ::-webkit-progress-bar Non-standard
    17. ::-webkit-progress-inner-element Non-standard
    18. ::-webkit-progress-value Non-standard
    19. ::-webkit-scrollbar Non-standard
    20. ::-webkit-search-cancel-button Non-standard
    21. ::-webkit-search-results-button Non-standard
    22. ::-webkit-slider-runnable-track Experimental Non-standard
    23. ::-webkit-slider-thumb Experimental Non-standard
    24. ::after
    25. ::backdrop
    26. ::before
    27. ::cue
    28. ::file-selector-button
    29. ::first-letter
    30. ::first-line
    31. ::grammar-error
    32. ::highlight()
    33. ::marker
    34. ::part()
    35. ::placeholder
    36. ::selection
    37. ::slotted()
    38. ::spelling-error
    39. ::target-text
    40. ::view-transition
    41. ::view-transition-group
    42. ::view-transition-image-pair
    43. ::view-transition-new
    44. ::view-transition-old
  14. At-rules
    1. @charset
    2. @color-profile
    3. @container
    4. @counter-style
    5. @document Non-standard Deprecated
    6. @font-face
    7. @font-feature-values
    8. @font-palette-values
    9. @import
    10. @keyframes
    11. @layer
    12. @media
    13. @namespace
    14. @page
    15. @position-try Experimental
    16. @property
    17. @scope
    18. @starting-style
    19. @supports
    20. @view-transition
  15. Functions
    1. -moz-image-rect Non-standard Deprecated
    2. abs()
    3. acos()
    4. anchor-size() Experimental
    5. anchor() Experimental
    6. asin()
    7. atan()
    8. atan2()
    9. attr()
    10. calc-size() Experimental
    11. calc()
    12. clamp()
    13. cos()
    14. counter()
    15. counters()
    16. cross-fade()
    17. element() Experimental
    18. env()
    19. exp()
    20. fit-content()
    21. hypot()
    22. log()
    23. max()
    24. min()
    25. minmax()
    26. mod()
    27. pow()
    28. ray()
    29. rem()
    30. repeat()
    31. round()
    32. sign()
    33. sin()
    34. sqrt()
    35. symbols()
    36. tan()
    37. url()
    38. var()
  16. Types
    1. <absolute-size>
    2. <alpha-value>
    3. <angle-percentage>
    4. <angle>
    5. <basic-shape>
    6. <blend-mode>
    7. <box-edge>
    8. <calc-keyword>
    9. <calc-sum>
    10. <color-interpolation-method>
    11. <color>
    12. <custom-ident>
    13. <dashed-ident>
    14. <dimension>
    15. <display-box>
    16. <display-inside>
    17. <display-internal>
    18. <display-legacy>
    19. <display-listitem>
    20. <display-outside>
    21. <easing-function>
    22. <filter-function>
    23. <flex>
    24. <frequency-percentage>
    25. <frequency>
    26. <generic-family>
    27. <gradient>
    28. <hex-color>
    29. <hue-interpolation-method>
    30. <hue>
    31. <ident>
    32. <image>
    33. <integer>
    34. <length-percentage>
    35. <length>
    36. <line-style>
    37. <named-color>
    38. <number>
    39. <overflow>
    40. <percentage>
    41. <position-area> Experimental
    42. <position>
    43. <ratio>
    44. <relative-size>
    45. <resolution>
    46. <shape> Deprecated
    47. <string>
    48. <system-color>
    49. <time-percentage>
    50. <time>
    51. <transform-function>
    52. <url>
  17. Guides
  18. Animations
    1. Using CSS animations
  19. Backgrounds and Borders
    1. Using multiple backgrounds
    2. Resizing background images
  20. Box alignment
    1. Box alignment in block layout
    2. Box alignment in flexbox
    3. Box alignment in grid layout
    4. Box alignment in multi-column layout
  21. Box model
    1. Introduction to the CSS basic box model
    2. Mastering margin collapsing
  22. Colors
    1. Applying_color_to_HTML_elements
    2. Color values
    3. Using relative colors
    4. Using color wisely
    5. Accessibility_Understanding_colors_and_luminance"
    6. Accessibility: Color contrast
  23. Columns
    1. Basic concepts of multi-column layout
    2. Styling columns
    3. Spanning and balancing columns
    4. Handling overflow in multi-column layout
    5. Handling content breaks in multi-column layout
  24. Conditional rules
    1. Using feature queries
  25. Containment
    1. Using CSS containment
    2. CSS container queries
    3. Using container size and style queries
  26. CSSOM view
    1. Coordinate systems
  27. Flexbox
    1. Basic concepts of flexbox
    2. Relationship of flexbox to other layout methods
    3. Aligning items in a flex container
    4. Ordering flex items
    5. Controlling ratios of flex items along the main axis
    6. Mastering wrapping of flex items
    7. Typical use cases of flexbox
  28. Flow layout
    1. Block and inline layout in normal flow
    2. In flow and out of flow
    3. Introduction to formatting contexts
    4. Flow layout and writing modes
    5. Flow layout and overflow
  29. Fonts
    1. OpenType font features guide
    2. Variable fonts guide
  30. Grid
    1. Basic concepts of grid layout
    2. Relationship of grid layout to other layout methods
    3. Grid layout using line-based placement
    4. Grid template areas
    5. Layout using named grid lines
    6. Auto-placement in grid layout
    7. Box alignment in grid layout
    8. Grids, logical values, and writing modes
    9. Grid layout and accessibility
    10. CSS grid layout and progressive enhancement
    11. Realizing common layouts using grids
    12. Subgrid
    13. Masonry layout Experimental
  31. Images
    1. Using CSS gradients
  32. Lists and counters
    1. Using CSS counters
    2. Consistent list indentation
  33. Logical properties
    1. Basic concepts of logical properties and values
    2. Logical properties for floating and positioning
    3. Logical properties for margins, borders, and padding
    4. Logical properties for sizing
  34. Math functions
    1. Using CSS math functions
  35. Media queries
    1. Using media queries
    2. Using media queries for accessibility
    3. Testing media queries programmatically
    4. Printing
  36. Nesting style rules
    1. Using CSS nesting
    2. CSS nesting at-rules
    3. CSS nesting and specificity
  37. Positioning
    1. Understanding z-index
  38. Scroll snap
    1. Basic concepts of scroll snap
  39. Shapes
    1. Overview of shapes
    2. Shapes from box values
    3. Basic shapes with shape-outside
    4. Shapes from images
  40. Text
    1. Wrapping and breaking text
  41. Transforms
    1. Using CSS transforms
  42. Transitions
    1. Using CSS transitions
  43. CSS Layout cookbook
    1. Recipe: Media objects
    2. Column layouts
    3. Center an element
    4. Sticky footers
    5. Split navigation
    6. Breadcrumb navigation
    7. List group with badges
    8. Pagination
    9. Card
    10. Grid wrapper
  45. Tools
    1. Color picker tool
    2. Box-shadow generator
    3. Border-image generator
    4. Border-radius generator
  • Syntax
  • Interpolation
  • Accessibility
  • Formal syntax
  • Examples
  • Specifications
  • Browser compatibility
  • See also

The <color> CSS data type represents a color. A <color> may also include an alpha-channel transparency value, indicating how the color should composite with its background.

Note: Although <color> values are precisely defined, their actual appearance may vary (sometimes significantly) from device to device. This is because most devices are not calibrated, and some browsers do not support output devices' color profiles.

Syntax

css/* Named colors */ rebeccapurple aliceblue /* RGB Hexadecimal */ #f09 #ff0099 /* RGB (Red, Green, Blue) */ rgb(255 0 153) rgb(255 0 153 / 80%) /* HSL (Hue, Saturation, Lightness) */ hsl(150 30% 60%) hsl(150 30% 60% / 80%) /* HWB (Hue, Whiteness, Blackness) */ hwb(12 50% 0%) hwb(194 0% 0% / 0.5) /* LAB (Lightness, A-axis, B-axis) */ lab(50% 40 59.5) lab(50% 40 59.5 / 0.5) /* LCH (Lightness, Chroma, Hue) */ lch(52.2% 72.2 50) lch(52.2% 72.2 50 / 0.5) /* Oklab (Lightness, A-axis, B-axis) */ oklab(59% 0.1 0.1) oklab(59% 0.1 0.1 / 0.5) /* Oklch (Lightness, Chroma, Hue) */ oklch(60% 0.15 50) oklch(60% 0.15 50 / 0.5) /* Relative CSS colors */ /* HSL hue change */ hsl(from red 240deg s l) /* HWB alpha channel change */ hwb(from green h w b / 0.5) /* LCH lightness change */ lch(from blue calc(l + 20) c h) /* light-dark */ light-dark(white, black) light-dark(rgb(255 255 255), rgb(0 0 0))

A <color> value can be specified using one of the methods listed below:

  • By keywords: <named-color> (such as blue or pink), <system-color>, and currentcolor.
  • By hexadecimal notations: <hex-color> (such as #ff0000).
  • By <color-function>, with parameters in a color space using functional notations:
    • sRGB color space: hsl(), hwb(), and rgb().
    • CIELAB color space: lab() and lch().
    • Oklab color space: oklab() and oklch().
    • Other color spaces: color().
  • By using relative color syntax to output a new color based on an existing color. Any of the above color functions can take an origin color preceded by the from keyword and followed by definitions of the channel values for the new output color.
  • By mixing two colors: color-mix().
  • By specifying two colors, using the first for light color-schemes and the second for dark color-schemes: light-dark().

currentcolor keyword

The currentcolor keyword represents the value of an element's color property. This lets you use the color value on properties that do not receive it by default.

If currentcolor is used as the value of the color property, it instead takes its value from the inherited value of the color property.

html<div style="color: blue; border: 1px dashed currentcolor;"> The color of this text is blue. <div style="background: currentcolor; height:9px;"></div> This block is surrounded by a blue border. </div>

Missing color components

Each component of any CSS color functions - except for those using the legacy comma-separated syntax - can be specified as the keyword none to be a missing component.

Explicitly specifying missing components in color interpolation is useful for cases where you would like to interpolate some color components but not others. For all other purposes, a missing component will effectively have a zero value in an appropriate unit: 0, 0%, or 0deg. For example, the following colors are equivalent when used outside of interpolation:

css/* These are equivalent */ color: oklab(50% none -0.25); color: oklab(50% 0 -0.25); /* These are equivalent */ background-color: hsl(none 100% 50%); background-color: hsl(0deg 100% 50%);

Interpolation

Color interpolation happens with gradients, transitions, and animations.

When interpolating <color> values, they are first converted to a given color space, and then each component of the computed values are interpolated linearly, with interpolation's speed being determined by the easing function in transitions and animations. The interpolation color space defaults to Oklab, but can be overridden through <color-interpolation-method> in some color-related functional notations.

Interpolation with missing components

Interpolating colors in the same space

When interpolating colors that are exactly in the interpolation color space, missing components from one color are replaced with existing values of the same components from the other color. For example, the following two expressions are equivalent:

csscolor-mix(in oklch, oklch(none 0.2 10), oklch(60% none 30)) color-mix(in oklch, oklch(60% 0.2 10), oklch(60% 0.2 30))

Note: If a component is missing from both colors, this component will be missing after the interpolation.

Interpolating colors from different spaces: analogous components

If any color to be interpolated is not in the interpolation color space, its missing components are transferred into the converted color based on analogous components of the same category as described in the following table:

Category Analogous components
Reds R, X
Greens G, Y
Blues B, Z
Lightness L
Colorfulness C, S
Hue H
a a
b b

For example:

  • X (0.2) in color(xyz 0.2 0.1 0.6) is analogous to R (50%) in rgb(50% 70% 30%).
  • H (0deg) in hsl(0deg 100% 80%) is analogous to H (140) in oklch(80% 0.1 140).

Using Oklch as the interpolation color space and the two colors below as an example:

csslch(80% 30 none) color(display-p3 0.7 0.5 none)

The preprocessing procedure is:

  1. Replace the missing components in both colors with a zero value:

    csslch(80% 30 0) color(display-p3 0.7 0.5 0)

  2. Convert both colors into the interpolation color space:

    cssoklch(83.915% 0.0902 0.28) oklch(63.612% 0.1522 78.748)

  3. If any component of the converted colors is analogous to a missing component in the corresponding original color, reset it as a missing component:

    cssoklch(83.915% 0.0902 none) oklch(63.612% 0.1522 78.748)

  4. Replace any missing component with the same component from the other converted color:

    cssoklch(83.915% 0.0902 78.748) oklch(63.612% 0.1522 78.748)

Accessibility

Some people have difficulty distinguishing colors. The WCAG 2.2 recommendation strongly advises against using color as the only means of conveying a specific message, action, or result. See color and color contrast for more information.

Formal syntax

<color> = <color-base> | currentColor | <system-color> <color-base> = <hex-color> | <color-function> | <named-color> | transparent <color-function> = <rgb()> | <rgba()> | <hsl()> | <hsla()> | <hwb()> | <lab()> | <lch()> | <oklab()> | <oklch()> | <color()> <rgb()> = <legacy-rgb-syntax> | <modern-rgb-syntax> <rgba()> = <legacy-rgba-syntax> | <modern-rgba-syntax> <hsl()> = <legacy-hsl-syntax> | <modern-hsl-syntax> <hsla()> = <legacy-hsla-syntax> | <modern-hsla-syntax> <hwb()> = hwb( [ <hue> | none ] [ <percentage> | <number> | none ] [ <percentage> | <number> | none ] [ / [ <alpha-value> | none ] ]? ) <lab()> = lab( [ <percentage> | <number> | none ] [ <percentage> | <number> | none ] [ <percentage> | <number> | none ] [ / [ <alpha-value> | none ] ]? ) <lch()> = lch( [ <percentage> | <number> | none ] [ <percentage> | <number> | none ] [ <hue> | none ] [ / [ <alpha-value> | none ] ]? ) <oklab()> = oklab( [ <percentage> | <number> | none ] [ <percentage> | <number> | none ] [ <percentage> | <number> | none ] [ / [ <alpha-value> | none ] ]? ) <oklch()> = oklch( [ <percentage> | <number> | none ] [ <percentage> | <number> | none ] [ <hue> | none ] [ / [ <alpha-value> | none ] ]? ) <color()> = color( [ from <color> ]? <colorspace-params> [ / [ <alpha-value> | none ] ]? ) <legacy-rgb-syntax> = rgb( <percentage>#{3} , <alpha-value>? ) | rgb( <number>#{3} , <alpha-value>? ) <modern-rgb-syntax> = rgb( [ <number> | <percentage> | none ]{3} [ / [ <alpha-value> | none ] ]? ) <legacy-rgba-syntax> = rgba( <percentage>#{3} , <alpha-value>? ) | rgba( <number>#{3} , <alpha-value>? ) <modern-rgba-syntax> = rgba( [ <number> | <percentage> | none ]{3} [ / [ <alpha-value> | none ] ]? ) <legacy-hsl-syntax> = hsl( <hue> , <percentage> , <percentage> , <alpha-value>? ) <modern-hsl-syntax> = hsl( [ <hue> | none ] [ <percentage> | <number> | none ] [ <percentage> | <number> | none ] [ / [ <alpha-value> | none ] ]? ) <legacy-hsla-syntax> = hsla( <hue> , <percentage> , <percentage> , <alpha-value>? ) <modern-hsla-syntax> = hsla( [ <hue> | none ] [ <percentage> | <number> | none ] [ <percentage> | <number> | none ] [ / [ <alpha-value> | none ] ]? ) <hue> = <number> | <angle> <alpha-value> = <number> | <percentage> <colorspace-params> = <custom-params> | <predefined-rgb-params> | <predefined-polar-params> | <predefined-rectangular-params> | <xyz-params> <custom-params> = <dashed-ident> [ <number> | <percentage> | none ]+ <predefined-rgb-params> = <predefined-rgb> [ <number> | <percentage> | none ]{3} <predefined-polar-params> = jzczhz [ <number> | <percentage> | none ]{2} [ <hue> | none ] <predefined-rectangular-params> = <predefined-rectangular> [ <number> | <percentage> | none ]{3} <xyz-params> = <xyz> [ <number> | <percentage> | none ]{3} <predefined-rgb> = srgb | srgb-linear | display-p3 | a98-rgb | prophoto-rgb | rec2020 | rec2100-pq | rec2100-hlg | rec2100-linear <predefined-rectangular> = jzazbz | ictcp <xyz> = xyz | xyz-d50 | xyz-d65

Examples

Exploring color values

In this example, we provide a <div> and a text input. Entering a valid color into the input causes the <div> to adopt that color, allowing you to test our color values.

HTML

html<div></div> <hr /> <label for="color">Enter a valid color value:</label> <input type="text" id="color" /> div { height: 200px; width: 200px; } const inputElem = document.querySelector("input"); const divElem = document.querySelector("div"); function validTextColor(stringToTest) { if (stringToTest === "inherit" || stringToTest === "transparent") { return false; } const div = document.createElement("div"); div.style.color = stringToTest; return !!div.style.color; } inputElem.addEventListener("input", () => { if (validTextColor(inputElem.value)) { divElem.style.backgroundColor = inputElem.value; divElem.textContent = ""; } else { divElem.removeAttribute("style"); divElem.textContent = "Invalid color value"; } });

Result

Generating fully saturated sRGB colors

This example shows fully saturated sRGB colors in the sRGB color space.

HTML

html<div></div> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div>

CSS

body { display: flex; flex-wrap: wrap; } div { height: 80px; margin: 10px; width: 80px; } cssdiv:nth-child(1) { background-color: hsl(0 100% 50%); } div:nth-child(2) { background-color: hsl(30 100% 50%); } div:nth-child(3) { background-color: hsl(60 100% 50%); } div:nth-child(4) { background-color: hsl(90 100% 50%); } div:nth-child(5) { background-color: hsl(120 100% 50%); } div:nth-child(6) { background-color: hsl(150 100% 50%); } div:nth-child(7) { background-color: hsl(180 100% 50%); } div:nth-child(8) { background-color: hsl(210 100% 50%); } div:nth-child(9) { background-color: hsl(240 100% 50%); } div:nth-child(10) { background-color: hsl(270 100% 50%); } div:nth-child(11) { background-color: hsl(300 100% 50%); } div:nth-child(12) { background-color: hsl(330 100% 50%); }

Result

Creating different shades of red

This example shows reds of different shades in the sRGB color space.

HTML

html<div></div> <div></div> <div></div> <div></div> <div></div> <div></div>

CSS

body { display: flex; flex-wrap: wrap; } div { box-sizing: border-box; height: 80px; margin: 10px; width: 80px; } cssdiv:nth-child(1) { background-color: hsl(0 100% 0%); } div:nth-child(2) { background-color: hsl(0 100% 20%); } div:nth-child(3) { background-color: hsl(0 100% 40%); } div:nth-child(4) { background-color: hsl(0 100% 60%); } div:nth-child(5) { background-color: hsl(0 100% 80%); } div:nth-child(6) { background-color: hsl(0 100% 100%); border: solid; }

Result

Creating reds of different saturation

This example shows reds of different saturations in the sRGB color space.

HTML

html<div></div> <div></div> <div></div> <div></div> <div></div> <div></div>

CSS

body { display: flex; flex-wrap: wrap; } div { height: 80px; margin: 10px; width: 80px; } cssdiv:nth-child(1) { background-color: hsl(0 0% 50%); } div:nth-child(2) { background-color: hsl(0 20% 50%); } div:nth-child(3) { background-color: hsl(0 40% 50%); } div:nth-child(4) { background-color: hsl(0 60% 50%); } div:nth-child(5) { background-color: hsl(0 80% 50%); } div:nth-child(6) { background-color: hsl(0 100% 50%); }

Result

Specifications

Specification
CSS Color Module Level 4 # color-syntax

Browser compatibility

BCD tables only load in the browser

See also

  • opacity: the property defining transparency at the element level
  • <hue>: the data type representing the hue angle of a color
  • color, background-color, border-color, box-shadow, outline-color, text-shadow: common properties that use <color>
  • Applying color to HTML elements using CSS
  • Using relative colors
  • New functions, gradients, and hues in CSS colors (Level 4) on MDN blog (2023)

Help improve MDN

Was this page helpful to you?YesNoLearn how to contribute.

This page was last modified on Nov 26, 2024 by MDN contributors.

View this page on GitHub • Report a problem with this content

Từ khóa » Html Color Codes Rgba