0ct0pu5
/
ladybird


			
				
					
						
						
							1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162636465666768697071727374757677787980818283848586878889
							<!DOCTYPE html>
<link rel="match" href="reference/css-color-functions-ref.html" />
<div style="background-color: rgb(10, 20, 30);">
    <p>legacy rgb with numbers</p>
</div>
<div style="background-color: rgb(10%, 20%, 30%);">
    <p>legacy rgb with percentages</p>
</div>
<div style="background-color: rgba(10, 20, 30, 0.5);">
    <p>legacy rgba with numbers and number alpha</p>
</div>
<div style="background-color: rgba(10, 20, 30, 50%);">
    <p>legacy rgba with numbers and percentage alpha</p>
</div>
<div style="background-color: rgba(10%, 20%, 30%, 0.5);">
    <p>legacy rgba with percentages and number alpha</p>
</div>
<div style="background-color: rgba(10%, 20%, 30%, 50%);">
    <p>legacy rgba with percentages and percentage alpha</p>
</div>
<div style="background-color: hsl(120, 100%, 50%);">
    <p>legacy hsl with number hue</p>
</div>
<div style="background-color: hsl(120deg, 100%, 50%);">
    <p>legacy hsl with degree hue</p>
</div>
<div style="background-color: hsla(120, 100%, 50%, 0.5);">
    <p>legacy hsla with number alpha</p>
</div>
<div style="background-color: hsla(120, 100%, 50%, 50%);">
    <p>legacy hsla with percentage alpha</p>
</div>
<div style="background-color: rgba(-20, 0, 300, 1.5);">
    <p>legacy rgba with out-of-range numbers (should be clamped)</p>
</div>
<div style="background-color: rgba(-20%, 0%, 300%, -50%);">
    <p>legacy rgba with out-of-range percentages (should be clamped)</p>
</div>
<div style="background-color: rgb(10 20% 30);">
    <p>modern rgb with mixed types</p>
</div>
<div style="background-color: rgb(10 20% 30 / 0.5);">
    <p>modern rgb with alpha</p>
</div>
<div style="background-color: rgba(10 20% 30);">
    <p>modern rgba without alpha</p>
</div>
<div style="background-color: hsl(120 30% 50%);">
    <p>modern hsl</p>
</div>
<div style="background-color: hsl(120 30% 50% / 50%);">
    <p>modern hsl with alpha</p>
</div>
<div style="background-color: hsla(120 30% 50%);">
    <p>modern hsla without alpha</p>
</div>
<div style="background-color: hsl(120 30 50);">
    <p>modern hsl with numbers</p>
</div>
<div style="background-color: hsl(400 -30% 120%);">
    <p>modern hsl with out-of-range values (should be clamped/wrapped)</p>
</div>
<div style="background-color: hwb(120 30% 50%);">
    <p>hwb with percentages</p>
</div>
<div style="background-color: hwb(120 30% 50% / 0.5);">
    <p>hwb with percentages and alpha</p>
</div>
<div style="background-color: hwb(120grad 30 50);">
    <p>hwb with numbers/angle</p>
</div>
<div style="background-color: hwb(120 30 50% / 50%);">
    <p>hwb with mixed-type values and percentage alpha</p>
</div>
<div style="background-color: oklab(0.2 0 0.1 / 0.5);">
    <p>oklab with numbers and alpha</p>
</div>
<div style="background-color: oklab(4 0 0.1);">
    <p>oklab with out-of-range lightness (should be clamped)</p>
</div>
<div style="background-color: oklab(20% 70% -80% / 50%);">
    <p>oklab with percentages and alpha</p>
</div>
<div style="background-color: oklch(0.5 0.1 20 / 0.5);">
    <p>oklch with numbers</p>
</div>
<div style="background-color: oklch(50% 10% 20deg / 50%);">
    <p>oklch with percentages and angle hue </p>
</div>