Color in HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Color</title>
</head>
<body>
<!-- by name -->
<!-- <p style="color: red">
Lorem ipsum dolor sit amet consectetur adipisicing elit. Nulla reprehenderit vero ducimus officiis harum qui est. Quo cupiditate eveniet assumenda eligendi. Dolor debitis ea, est eligendi exercitationem culpa illum consequuntur.
</p> -->
<!--
by rgb
r -> red (0 - 255)
g -> green (0 - 255)
b -> blue (0 - 255)
color: rgb(red, green, blue)
color: rgb(0-255, 0-255, 0-255)
red -> rgb(255,0,0)
green -> rgb(0,255,0)
blue -> rgb(0,0,255)
black -> rgb(0,0,0)
white -> rgb(255,255,255)
-->
<!-- <p style="color: rgb(255,0,0)">
Lorem ipsum dolor sit amet consectetur adipisicing elit. Fuga, repellat! Delectus dolore doloribus ab! Molestiae officiis aperiam, est deserunt repudiandae consectetur aliquam quam dolores recusandae id facilis et exercitationem culpa!
</p>
<p style="color: rgb(0,255,0)">
Lorem ipsum, dolor sit amet consectetur adipisicing elit. Molestias vel temporibus reiciendis ducimus provident ex rerum adipisci quaerat, perspiciatis laboriosam dolorum ut eius ad unde repudiandae aspernatur blanditiis, veniam quod.
</p>
<p style="color: rgb(0,0,255)">
Lorem ipsum dolor sit amet consectetur adipisicing elit. Cum delectus modi cupiditate magnam, alias laboriosam harum voluptas dolorum ipsam officia doloremque amet voluptatum et dolorem ipsa ut? Eum, ducimus mollitia?
</p>
<p style="color: rgb(0,0,0)">
Lorem ipsum dolor sit amet consectetur adipisicing elit. Ipsam officia incidunt quasi ea ut molestiae voluptatibus eveniet culpa quidem placeat esse quibusdam rem cum voluptatem doloremque, error dolor est laborum?
</p>
<p style="color: rgb(255,255,255)">
Lorem ipsum, dolor sit amet consectetur adipisicing elit. Alias facere minima porro numquam itaque incidunt architecto dolore, sint sunt quos reprehenderit quod mollitia doloremque vero. Rerum illum ad reiciendis tempore?
</p>
<p style="color: rgb(5, 229, 23)">
Lorem, ipsum dolor sit amet consectetur adipisicing elit. Voluptates odio ratione doloremque incidunt similique iste totam, quos neque. Tempore nostrum nemo beatae eum esse, totam dicta corporis eos quae qui.
</p> -->
<!--
by hsl
h -> hue / color (0-360)
s -> saturation / darkness (0-100%)
l -> lightness (0-100%)
color: hsl(hue, saturation%, lightness)
color: hsl(0-360, 0%-100%, 0%-100%)
red -> hsl(0, 100%, 50%)
green -> hsl(240, 100%, 50%)
blue -> hsl(120, 100%, 50%)
black -> hsl(0, 100%, 0%)
white -> hsl(0, 100%, 100%)
-->
<!-- <p style="color: hsl(0, 100%, 50%)">
Lorem ipsum, dolor sit amet consectetur adipisicing elit. Ad, rem dolorem? Magnam voluptate, error voluptatum eum id molestias beatae repellendus ratione recusandae adipisci fugiat qui? Itaque dolorum minus in dolore.
</p> -->
<!--
by hex
number system
decimal 0 1 2 3 4 5 6 7 8 9 (10)
binary 0 1 (2)
octal 0 1 2 3 4 5 6 7 (8)
hex 0 1 2 3 4 5 6 7 8 9 a b c d e f (16)
color: #rrggbb;
red -> #ff0000; #f00
green -> #00ff00; #0f0
blue -> #0000ff; #00f
black -> #000000 #000
white -> #ffffff #fff
-->
<p style="color: #ff0000">
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quo corporis, fugiat quas numquam fuga id pariatur quisquam, at error nemo totam eligendi esse dolorem perferendis optio blanditiis excepturi obcaecati! Quasi?
</p>
<p style="color: #00ff00">
Lorem ipsum dolor sit, amet consectetur adipisicing elit. Magnam corrupti et reiciendis? Eum voluptates laboriosam, impedit saepe commodi labore? Labore mollitia quam quibusdam explicabo voluptatum aperiam, quas quae fugiat fugit!
</p>
<p style="color: #0000ff">
Lorem ipsum dolor sit amet consectetur adipisicing elit. Aut cum neque consequatur delectus laboriosam impedit sunt, corrupti vero debitis facere voluptate velit! Ullam non dignissimos quasi et unde quas repellat.
</p>
<p style="color: #000000">
Lorem ipsum, dolor sit amet consectetur adipisicing elit. Recusandae, reiciendis voluptatum, doloribus debitis sint explicabo accusantium quasi veniam suscipit temporibus aliquam perferendis? Culpa, eaque atque. Assumenda, ab! Distinctio, illum nobis.
</p>
<p style="color: #ffffff">
Lorem ipsum dolor sit amet consectetur adipisicing elit. Dolores alias sapiente commodi at quod dolor placeat laborum vel odio quisquam autem, nostrum obcaecati explicabo iste, pariatur corrupti et vitae sed.
</p>
<br><br>
<p style="color: #f00">
Lorem, ipsum dolor sit amet consectetur adipisicing elit. Iste, explicabo! Culpa praesentium animi nihil dolor! Error itaque, ab at reprehenderit a laborum quod possimus ex, consequatur et fuga delectus dignissimos.
</p>
<p style="color: #0f0">
Lorem ipsum dolor, sit amet consectetur adipisicing elit. Rem, voluptate? Repellat, nihil cupiditate voluptatibus quidem, nobis dolor reiciendis nisi qui incidunt laborum eaque eos molestiae, quos voluptate excepturi sint libero.
</p>
<p style="color: #00f">
Lorem ipsum dolor sit amet consectetur adipisicing elit. Sapiente ipsa et eveniet aspernatur odio aperiam, voluptas esse sint quidem ducimus praesentium veniam sed amet fugiat molestias! Ducimus, aliquam. Iure, velit!
</p>
<p style="color: #000">
Lorem ipsum dolor sit amet consectetur adipisicing elit. Fugit veritatis repellendus numquam dicta quo eligendi modi nobis quod exercitationem molestias, ullam, reprehenderit, ipsum tenetur sed voluptatem ab iste. Quasi, autem.
</p>
<p style="color: #fff">
Lorem ipsum dolor sit amet consectetur adipisicing elit. Laborum possimus cum, pariatur consequuntur distinctio aut. Eveniet, eligendi. Aut iure officiis sit, nemo eveniet maxime cupiditate ea, officia quod dolorem placeat?
</p>
</body>
</html>
Comments
Post a Comment