راهنمای رنگ‌های CSS مدرن با RGB و HSL و HWB و LAB و LCH

.my-element {
  background-color: red;
}

.my-element {
  background-color: #ff0000;
}

.my-element {
  background-color: rgb(255, 0, 0);
}

.my-element {
  background-color: rgb(255, 255, 255);
}

.my-element {
  background-color: rgba(255, 0, 0, 0.5); // transparency of 50%
}

.my-element {
  background-color: hsl(0deg, 100%, 20%); // dark red
}

.my-element {
  background-color: hsl(0deg, 100%, 50%); // medium red
}

.my-element {
  background-color: hsl(0deg, 100%, 80%); // light red
}

.my-element {
  background-color: hsl(180deg, 50%, 50%);
}

.my-element {
  background-color: hsl(0.5turn, 50%, 50%);
}

.my-element {
  background-color: hsl(180, 50%, 50%);
}

.my-element {
  /* optional alpha value gives us 50% opacity */
  background-color: hsl(0 100% 50% / 0.5);
}

.my-element {
  /* With no alpha value the background is fully opaque*/
  background-color: hsl(0 100% 50%);
}

<div>
  <h1>HWB color explorer</h1>
  <p class="warning">
    Sorry, your browser doesn’t support HWB colors.
  </p>
  <code class="result" data-result>hwb(0 0 0)</code>
  <div class="controls" data-controls>
    <div class="input-group">
      <label for="h">Hue</label>
      <input id="h" type="range" min="0" max="360">
    </div>
    <div class="input-group">
      <label for="w">Whiteness</label>
      <input id="w" type="range" min="0" max="100" value="0">
    </div>
    <div class="input-group">
      <label for="b">Blackness</label>
      <input id="b" type="range" min="0" max="100" value="0">
    </div>
  </div>
</div>

* {
  box-sizing: border-box;
}

body {
  font-family: "Open Sans", sans-serif;
  margin: 0;
  min-height: 100vh;
  background: hsl(0, 50%, 80%);
  display: flex;
  justify-content: center;
  align-items: center;
  color: var(--text, #000000);
}

.controls {
  padding: 1.75rem;
  background: #ffffff;
  border-radius: 0.5rem;
  display: none;
  color: #000000;
  
  > * + * {
    margin-top: 0.75rem;
  }
}

.result {
  display: block;
  font-size: 1.4rem;
  margin: 0 0 1rem;
  text-align: center;
}

.input-group {
  display: flex;
  align-items: center;
  
  label {
    margin-right: 0.5rem;
    width: 6rem;
  }
  
  input {
    flex: 1 1 auto;
  }
}

@supports (color: hwb(0 0% 0%)) {
  body {
    background: hwb(var(--h, 0) calc(var(--w, 0) * 1%) calc(var(--b, 0) * 1%));
  }
  
  .controls {
    display: block;
  }
  
  .warning {
    display: none;
  }
}

const controls = document.querySelector('[data-controls]')
const inputs = [...document.querySelectorAll('input')]
const result = document.querySelector('[data-result]')

const setTextColor = () => {
  const wInput = inputs[1].value
  const bInput = inputs[2].value
  let textColor = '#ffffff'
  
  if (wInput > 50 && bInput <= 50) {
    textColor = '#000000'
  } else if (bInput > 50 && wInput <= 50) {
    textColor = '#ffffff'
  }
  
  document.body.style.setProperty('--text', textColor)
}

controls.addEventListener('input', (e) => {
  if (!e.target.id) return
  
  const { value } = e.target
  document.body.style.setProperty(`--${e.target.id}`, value)
  
  const results = inputs.map((input, i) => {
    return i === 0 ? `${input.value}%` : input.value
  }).join(' ')
  
  result.innerText = `hwb(${results})`
  
  // Change text color for accessibility
  setTextColor()
})

.my-element {
  background-color: lab(80% 100 50); // reddish pink
}

.my-element {
  background-color: lab(80% -80 -100); // blue/turquoise
}

<div>
  <h1>LAB color explorer</h1>
  <p class="warning">
    Sorry, your browser doesn’t support LAB colors.
  </p>
  <code class="result" data-result>lab(50% 0 0)</code>
  <div class="controls" data-controls>
    <div class="input-group">
      <label for="l">L</label>
      <input id="l" type="range" min="0" max="100">
    </div>
    <div class="input-group">
      <label for="a">A</label>
      <input id="a" type="range" min="-160" max="160">
    </div>
    <div class="input-group">
      <label for="b">B</label>
      <input id="b" type="range" min="-160" max="160">
    </div>
  </div>
</div>

* {
  box-sizing: border-box;
}

body {
  font-family: "Open Sans", sans-serif;
  margin: 0;
  min-height: 100vh;
  background: hsl(0, 50%, 80%);
  display: flex;
  justify-content: center;
  align-items: center;
  color: var(--text, #000000);
}

h1 {
  text-align: center;
}

.controls {
  padding: 1.75rem;
  background: #ffffff;
  border-radius: 0.5rem;
  display: none;
  color: #000000;
  
  > * + * {
    margin-top: 0.75rem;
  }
}

.result {
  display: block;
  font-size: 1.4rem;
  margin: 0 0 1rem;
  text-align: center;
}

.input-group {
  display: flex;
  align-items: center;
  
  label {
    margin-right: 0.5rem;
    width: 1.5rem;
  }
  
  input {
    flex: 1 0 auto;
  }
}

@supports (color: lab(0% 0 0)) {
  body {
    background: lab(calc(var(--l, 50) * 1%) var(--a, 0) var(--b, 0));
  }
  
  .controls {
    display: block;
  }
  
  .warning {
    display: none;
  }
}

const controls = document.querySelector('[data-controls]')
const inputs = [...document.querySelectorAll('input')]
const result = document.querySelector('[data-result]')

controls.addEventListener('input', (e) => {
  if (!e.target.id) return
  
  const { value } = e.target
  document.body.style.setProperty(`--${e.target.id}`, value)
  
  const results = inputs.map((input, i) => {
    return i === 0 ? `${input.value}%` : input.value
  }).join(' ')
  
  result.innerText = `lab(${results})`
  
  // Change text color for accessibility
  if (e.target.id === 'l') {
    const textColor = value < 50 ? '#ffffff' : '#000000'
    document.body.style.setProperty('--text', textColor)
  }
})

.my-element {
  background-color: lch(80% 100 50);
}

.my-element {
  background-color: lch(80% 240 50); // this color would be outside of the displayable range of today’s browsers
}

<!--Colors coverted using Lea Verou’s LCH coverter https://css.land/lch/-->
<div class="main-wrapper">
	<header>
		<h1>Comparing LCH and HSL colors</h1>
		<button data-toggle hidden role="switch" checked="false">
			Grayscale<span data-text aria-hidden>: Off</span>
		</button>
	</header>
	<div class="grid">
		<div class="wrapper">
			<h2>LCH</h2>
			<section>
				<h3>Lightness</h3>
				<div class="color-strip-wrapper">
					<ol class="color-strip color-strip--lightness">
						<li><p>0%</p></li>
						<li><p>10%</p></li>
						<li><p>20%</p></li>
						<li><p>30%</p></li>
						<li><p>40%</p></li>
						<li><p>50%</p></li>
						<li><p>60%</p></li>
						<li><p>70%</p></li>
						<li><p>80%</p></li>
						<li><p>90%</p></li>
						<li><p>100%</p></li>
					</ol>
				</div>
			</section>

			<section>
				<h3>Chroma</h3>
				<div class="color-strip-wrapper">
					<ol class="color-strip color-strip--chroma">
						<li><p>0</p></li>
						<li><p>10</p></li>
						<li><p>20</p></li>
						<li><p>30</p></li>
						<li><p>40</p></li>
						<li><p>50</p></li>
						<li><p>60</p></li>
						<li><p>70</p></li>
						<li><p>80</p></li>
						<li><p>90</p></li>
						<li><p>100</p></li>
					</ol>
				</div>
			</section>

			<section>
				<h3>Hue</h3>
				<div class="color-strip-wrapper">
					<ol class="color-strip color-strip--hue">
						<li><p>0</p></li>
						<li><p>36</p></li>
						<li><p>72</p></li>
						<li><p>108</p></li>
						<li><p>144</p></li>
						<li><p>180</p></li>
						<li><p>216</p></li>
						<li><p>252</p></li>
						<li><p>288</p></li>
						<li><p>324</p></li>
						<li><p>360</p></li>
					</ol>
				</div>
			</section>
		</div>

		<div class="wrapper">
			<h2>HSL</h2>
			<section>
				<h3>Hue</h3>
				<div class="color-strip-wrapper color-strip-wrapper--hsl">
					<ol class="color-strip color-strip--hue">
						<li><p>0</p></li>
						<li><p>36</p></li>
						<li><p>72</p></li>
						<li><p>108</p></li>
						<li><p>144</p></li>
						<li><p>180</p></li>
						<li><p>216</p></li>
						<li><p>252</p></li>
						<li><p>288</p></li>
						<li><p>324</p></li>
						<li><p>360</p></li>
					</ol>
				</div>
			</section>

			<section>
				<h3>Saturation</h3>
				<div class="color-strip-wrapper color-strip-wrapper--hsl">
					<ol class="color-strip color-strip--saturation">
						<li><p>0%</p></li>
						<li><p>10%</p></li>
						<li><p>20%</p></li>
						<li><p>30%</p></li>
						<li><p>40%</p></li>
						<li><p>50%</p></li>
						<li><p>60%</p></li>
						<li><p>70%</p></li>
						<li><p>80%</p></li>
						<li><p>90%</p></li>
						<li><p>100%</p></li>
					</ol>
				</div>
			</section>

			<section>
				<h3>Lightness</h3>
				<div class="color-strip-wrapper color-strip-wrapper--hsl">
					<ol class="color-strip color-strip--lightness-hsl">
						<li><p>0%</p></li>
						<li><p>10%</p></li>
						<li><p>20%</p></li>
						<li><p>30%</p></li>
						<li><p>40%</p></li>
						<li><p>50%</p></li>
						<li><p>60%</p></li>
						<li><p>70%</p></li>
						<li><p>80%</p></li>
						<li><p>90%</p></li>
						<li><p>100%</p></li>
					</ol>
				</div>
			</section>
		</div>
	</div>
</div>

* {
	box-sizing: border-box;
}

body {
	font-family: Helvetica, sans-serif;
	margin: 0;
	padding: 1rem;
	min-height: 100vh;
	
	&.is-grayscale {
		.grid {
			filter: grayscale(100%);
		}
	}
}

.main-wrapper {
	max-width: 115rem;
	margin: 0 auto;
}

button {
	margin-bottom: 1rem;
	font-size: 1.2rem;
	padding: 0.5rem 1rem;
	border-radius: 0.4rem;
	border: none;
	background: darkslategray;
	color: #ffffff;
	min-width: 12rem;
	
	span {
		pointer-events: none;
	}
	
	&:hover,
	&:focus {
		background: slategray;
	}
}

.grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 600px), 1fr));
	gap: 1rem;
	justify-content: center;
}

.wrapper {
	padding: max(1rem, 2vw);
	background: rgba(240, 240, 240);
	border-radius: 0.5rem;
	max-width: 60rem;
}

section + section {
	margin-top: 2rem;
}

.color-strip-wrapper {
	max-width: 100%;
	overflow-x: auto;
}

.color-strip {
	--c0: rgb(0% 0% 0%);
	--c1: rgb(0% 10.28% 27.62%);
	--c2: rgb(0% 18.2% 44.24%);
	--c3: rgb(15.43% 26.8% 54.94%);
	--c4: rgb(26.84% 35.94% 65.43%);
	--c5: rgb(37.58% 45.53% 76.21%);
	--c6: rgb(48.28% 55.51% 87.27%);
	--c7: rgb(59.1% 65.83% 98.58%);
	--c8: rgb(73.36% 76.85% 100%);
	--c9: rgb(86.98% 88.27% 100%);
	--c10: rgb(100% 100% 100%);
	
	width: max(50rem, 100%);
	height: 5rem;
	display: flex;
	margin: 0;
	padding: 0;
	
	> li {
		--color: var(--c0);
		width: calc(100% / 11);
		height: 100%;
		display: flex;
		justify-content: center;
		align-items: center;
		background: var(--color);
		
		&:nth-child(2) { --i: 1; }
		&:nth-child(3) { --i: 2; }
		&:nth-child(4) { --i: 3; }
		&:nth-child(5) { --i: 4; }
		&:nth-child(6) { --i: 5; }
		&:nth-child(7) { --i: 6; }
		&:nth-child(8) { --i: 7; }
		&:nth-child(9) { --i: 8; }
		&:nth-child(10) { --i: 9; }
		&:nth-child(11) { --i: 10; }
		
		&:nth-child(2) { --color: var(--c1); }
		&:nth-child(3) { --color: var(--c2); }
		&:nth-child(4) { --color: var(--c3); }
		&:nth-child(5) { --color: var(--c4); }
		&:nth-child(6) { --color: var(--c5); }
		&:nth-child(7) { --color: var(--c6); }
		&:nth-child(8) { --color: var(--c7); }
		&:nth-child(9) { --color: var(--c8); }
		&:nth-child(10) { --color: var(--c9); }
		&:nth-child(11) { --color: var(--c10); }
	}
	
	@supports (background: lch(0% 45 282)) {
		--CONSTANTS: 45 282;
		--c0: lch(0% var(--CONSTANTS));
		--c1: lch(10% var(--CONSTANTS));
		--c2: lch(20% var(--CONSTANTS));
		--c3: lch(30% var(--CONSTANTS));
		--c4: lch(40% var(--CONSTANTS));
		--c5: lch(50% var(--CONSTANTS));
		--c6: lch(60% var(--CONSTANTS));
		--c7: lch(70% var(--CONSTANTS));
		--c8: lch(80% var(--CONSTANTS));
		--c9: lch(90% var(--CONSTANTS));
		--c10: lch(100% var(--CONSTANTS));
	}
	
	p {
		background: #ffffff;
		padding: 0.18rem 0.25rem 0.125rem;
		border-radius: 0.2rem;
		line-height: 1;
	}
}

.color-strip--chroma {
	--c0: rgb(46.63% 46.63% 46.64%);
	--c1: rgb(45.59% 46.35% 53.16%);
	--c2: rgb(44.1% 46.08% 59.69%);
	--c3: rgb(42.05% 45.84% 66.26%);
	--c4: rgb(39.3% 45.63% 72.88%);
	--c5: rgb(35.59% 45.44% 79.56%);
	--c6: rgb(30.45% 45.28% 86.3%);
	--c7: rgb(22.7% 45.16% 93.11%);
	--c8: rgb(4.71% 45.07% 99.99%);
	--c9: rgb(4.63% 45.07% 100%);
	--c10: rgb(4.63% 45.07% 100%);
	
	@supports (background: lch(0% 45 282)) {
		--L: 50%;
		--H: 282;
		--c0: lch(var(--L) 0 var(--H));
		--c1: lch(var(--L) 10 var(--H));
		--c2: lch(var(--L) 20 var(--H));
		--c3: lch(var(--L) 30 var(--H));
		--c4: lch(var(--L) 40 var(--H));
		--c5: lch(var(--L) 50 var(--H));
		--c6: lch(var(--L) 60 var(--H));
		--c7: lch(var(--L) 70 var(--H));
		--c8: lch(var(--L) 80 var(--H));
		--c9: lch(var(--L) 90 var(--H));
		--c10: lch(var(--L) 100 var(--H));
	}
}

.color-strip--hue {
	--c0: rgb(75.62% 30.45% 47.57%);
	--c1: rgb(73.61% 34.24% 28.07%);
	--c2: rgb(61.78% 42.39% 12.8%);
	--c3: rgb(43.42% 49.22% 10.47%);
	--c4: rgb(16.41% 53.24% 25.54%);
	--c5: rgb(0% 52.88% 46.13%);
	--c6: rgb(0% 51.79% 59.01%);
	--c7: rgb(0% 50.07% 73.51%);
	--c8: rgb(41.25% 44.14% 78.68%);
	--c9: rgb(65.22% 35.59% 66.7%);
	--c10: rgb(75.62% 30.45% 47.57%);
	
	@supports (background: lch(0% 45 282)) {
		--CONSTANTS: 50% 50;
		--c0: lch(var(--CONSTANTS) 0);
		--c1: lch(var(--CONSTANTS) 36);
		--c2: lch(var(--CONSTANTS) 72);
		--c3: lch(var(--CONSTANTS) 108);
		--c4: lch(var(--CONSTANTS) 144);
		--c5: lch(var(--CONSTANTS) 180);
		--c6: lch(var(--CONSTANTS) 216);
		--c7: lch(var(--CONSTANTS) 252);
		--c8: lch(var(--CONSTANTS) 288);
		--c9: lch(var(--CONSTANTS) 324);
		--c10: lch(var(--CONSTANTS) 360);
	}
}

.color-strip-wrapper--hsl {
	.color-strip--hue {
		> li {
			--hue: calc(var(--i) * (360 / 10));
			background: hsl(var(--hue, 0) 50% 45%);
		}
	}
	
	.color-strip--saturation {
		> li {
			--s: calc(var(--i, 0) * 10);
			background: hsl(282 calc(var(--s) * 1%) 45%);
		}
	}
	
	.color-strip--lightness-hsl {
		> li {
			--l: calc(var(--i, 0) * 10);
			background: hsl(282 50% calc(var(--l) * 1%));
		}
	}
}

const button = document.querySelector('[data-toggle]')
const buttonText = document.querySelector('[data-text]')

button.hidden = false

button.addEventListener('click', (e) => {
	if (e.target.checked) {
		document.body.classList.remove('is-grayscale')
		buttonText.innerText = ': Off'
		e.target.checked = false
	} else {
		document.body.classList.add('is-grayscale')
		buttonText.innerText = ': On'
		e.target.checked = true
	}
})

<div class="lch">LCH</div>
<div class="hsl">HSL</div>
<div class="rgb">RGB (P3 color)</div>

* {
	box-sizing: border-box;
}

body {
	font-family: 'Helvetica', sans-serif;
	font-size: 1.6rem;
	color: #ffffff;
	min-height: 100vh;
	margin: 0;
}

body > div {
	width: 100%;
	min-height: 50vh;
	display: flex;
	justify-content: center;
	align-items: center;
}

.lch {
	background: linear-gradient(
		to right,
		lch(50% 100 200),
		lch(50% 100 0)
	);
}

.hsl {
	background: linear-gradient(
		to right,
		hsl(188 100% 34%),
		hsl(331 100% 50%)
	);
}

.rgb {
	background: linear-gradient(
		to right,
		color(display-p3 0 0.5188 0.631),
		color(display-p3 0.8596 0 0.4786)
	);
}

.my-element {
  background-color: lch(80% 240 50 / 0.5); // Resulting color has 50% opacity
}

.my-element {
  background-color: lch(55% 102 360);

  /* LCH color converted to RGB using Lea Verou’s tool: https://css.land/lch/ */
  background-color: rgb(98.38% 0% 53.33%);
}

.my-element {
  display: none;
}

/* Only display this element if the browser supports lch() */
@supports (background-color: lch(55% 102 360)) {
  .my-element {
    display: block;
    background-color: lch(55% 102 360);
  }
}

.my-element {
  background: rgb(98.38% 0% 53.33%); // bright pink
  background: color(display-p3 0.947 0 0.5295); // equivalent in P3 color space
}

li {
  --hue: calc(var(--i) * (360 / 10));
  background: hsl(var(--hue, 0) 50% 45%);
}

$primary: rgb(141 66 245);

:root {
  --h: 265;
  --s: 70%;
  --l: 50%;
        
  --primary: hsl(var(--h) var(--s) var(--l));
  --primaryDark: hsl(var(--h) var(--s) 35%);
  --primaryLight: hsl(var(--h) var(--s) 75%);
}

li {
  --hue: calc(var(--i) * (360 / 10));
  background: lch(50% 45 var(--hue, 0));
}

.my-element {
  /* equal amounts of red and blue */
  background-color: color-mix(in lch, red, blue);
}

.my-element {
  /* 30% red, 70% blue */
  background-color: color-mix(in lch, red 30%, blue);
}

.my-element {
  color: wheat;
  background-color: color-contrast(wheat vs bisque, darkgoldenrod, olive, sienna, darkgreen, maroon to AA);
}