Bab 012 - Warna

Ada 5 macam metode penentuan warna HTML, yaitu :

  • Nama Warna
  • HEX (nilai warna)
  • RGB
  • HSL
  • RGBA
  • HSLA.

Yang paling umum digunakan adalah metode Nama Warna & HEX.

Kita fokus pada metode Nama Warna & HEX saja, yang selainnya saya hanya memberikan penjelasan umum saja.

 

 

Nama Warna

Dalam HTML, warna dapat ditentukan dengan menggunakan nama warna:

Contoh :

red -> menghasilkan warna merah
green -> menghasilkan warna hijau
black -> menghasilkan warna hitam

 

 


Metode HEX

Dalam HTML, warna juga dapat ditentukan menggunakan nilai HEX (hexa decimal)

Contoh :

#FF0000 -> menghasilkan warna merah
#008000 -> menghasilkan warna hijau

 

 

Metode RGB

Dalam HTML, warna dapat ditentukan sebagai nilai RGB, menggunakan rumus ini:

rgb (red, green, blue)

Setiap parameter (merah, hijau, dan biru) menentukan intensitas warna antara 0 dan 255.

Contoh :

rgb(255, 0, 0) -> menghasilkan warna merah
rgb(0, 255, 0) -> menghasilkan warna hijau
rgb(0, 0, 0) -> menghasilkan warna hitam
rgb(255, 255, 255) -> menghasilkan warna hitam

 

 

Metode HSL

Dalam HTML, warna dapat ditentukan menggunakan rona, saturasi, dan cahaya (HSL) dalam bentuk:

hsl ( hue , saturation , lightness )

Hue adalah gelar pada rona warna dari 0 hingga 360. 0 berwarna merah, 120 berwarna hijau, dan 240 berwarna biru.

Saturasi adalah nilai persentase, 0% berarti warna abu-abu, dan 100% adalah warna penuh.

Kecerahan juga persentase, 0% hitam, 50% tidak terang atau gelap, 100% putih

Contoh :

hsl(0, 100%, 50%) -> menghasilkan warna merah
hsl(240, 100%, 50%) -> menghasilkan warna biru

 

 

Metode RGBA

Nilai warna RGBA adalah perpanjangan dari nilai warna RGB dengan saluran Alpha - yang menentukan opacity untuk warna

Nilai warna RGBA ditentukan dengan:

rgba ( red, green, blue, alpha )

Parameter alfa adalah angka antara 0,0 (sepenuhnya transparan) dan 1,0 (tidak transparan sama sekali):

Contoh :

rgba(255, 0, 0, 0.3) --> menghasilkan warna merah transparant opacity 0.3
rgba(255, 0, 0, 1.0) --> menghasilkan warna merah tidak transparant opacity 1.0

 

 

Metode HSLA

Nilai warna HSLA adalah perpanjangan dari nilai warna HSL dengan saluran alpha - yang menentukan opacity untuk warna.

Nilai warna HSLA ditentukan dengan:

hsla ( hue, saturation , lightness, alpha )

Parameter alfa adalah angka antara 0,0 (sepenuhnya transparan) dan 1,0 (tidak transparan sama sekali):

Contoh :

hsla(0, 100%, 50%, 0.3) --> menghasilkan warna merah transparant opacity 0.3
hsla(0, 100%, 50%, 0.3) --> menghasilkan warna merah tidak transparant opacity 1.0

 

 

Tabel Warna

Nama Warna

HEX

 

Alice Blue

#F0F8FF

 

Antique White

#FAEBD7

 

Aqua

#00FFFF

 

Aquamarine

#7FFFD4

 

Azure

#F0FFFF

 

Beige

#F5F5DC

 

Bisque

#FFE4C4

 

Black

#000000

 

Blanched Almond

#FFEBCD

 

Blue

#0000FF

 

Blue Violet

#8A2BE2

 

Brown

#A52A2A

 

Burly Wood

#DEB887

 

Cadet Blue

#5F9EA0

 

Chartreuse

#7FFF00

 

Chocolate

#D2691E

 

Coral

#FF7F50

 

Cornflower Blue

#6495ED

 

Cornsilk

#FFF8DC

 

Crimson

#DC143C

 

Cyan

#00FFFF

 

Dark Blue

#00008B

 

Dark Cyan

#008B8B

 

Dark Golden Rod

#B8860B

 

Dark Gray

#A9A9A9

 

Dark Green

#006400

 

Dark Khaki

#BDB76B

 

Dark Magenta

#8B008B

 

Dark Olive Green

#556B2F

 

Dark Orange

#FF8C00

 

Dark Orchid

#9932CC

 

Dark Red

#8B0000

 

Dark Salmon

#E9967A

 

Dark Sea Green

#8FBC8F

 

Dark Slate Blue

#483D8B

 

Dark Slate Gray

#2F4F4F

 

Dark Turquoise

#00CED1

 

Dark Violet

#9400D3

 

Deep Pink

#FF1493

 

Deep Sky Blue

#00BFFF

 

Dim Gray

#696969

 

Dodger Blue

#1E90FF

 

Fire Brick

#B22222

 

Floral White

#FFFAF0

 

Forest Green

#228B22

 

Fuchsia

#FF00FF

 

Gainsboro

#DCDCDC

 

Ghost White

#F8F8FF

 

Gold

#FFD700

 

Golden Rod

#DAA520

 

Gray

#808080

 

Green

#008000

 

Green Yellow

#ADFF2F

 

Honey Dew

#F0FFF0

 

Hot Pink

#FF69B4

 

Indian Red

#CD5C5C

 

Indigo

#4B0082

 

Ivory

#FFFFF0

 

Khaki

#F0E68C

 

Lavender

#E6E6FA

 

Lavender Blush

#FFF0F5

 

Lawn Green

#7CFC00

 

Lemon Chiffon

#FFFACD

 

Light Blue

#ADD8E6

 

Light Coral

#F08080

 

Light Cyan

#E0FFFF

 

Light Golden Rod Yellow

#FAFAD2

 

Light Gray

#D3D3D3

 

Light Green

#90EE90

 

Light Pink

#FFB6C1

 

Light Salmon

#FFA07A

 

Light Sea Green

#20B2AA

 

Light Sky Blue

#87CEFA

 

Light Slate Gray

#778899

 

Light Steel Blue

#B0C4DE

 

Light Yellow

#FFFFE0

 

Lime

#00FF00

 

Lime Green

#32CD32

 

Linen

#FAF0E6

 

Magenta

#FF00FF

 

Maroon

#800000

 

Medium Aqua Marine

#66CDAA

 

Medium Blue

#0000CD

 

Medium Orchid

#BA55D3

 

Medium Purple

#9370DB

 

Medium Sea Green

#3CB371

 

Medium Slate Blue

#7B68EE

 

Medium Spring Green

#00FA9A

 

Medium Turquoise

#48D1CC

 

Medium Violet Red

#C71585

 

Midnight Blue

#191970

 

Mint Cream

#F5FFFA

 

Misty Rose

#FFE4E1

 

Moccasin

#FFE4B5

 

Navajo White

#FFDEAD

 

Navy

#000080

 

Old Lace

#FDF5E6

 

Olive

#808000

 

Olive Drab

#6B8E23

 

Orange

#FFA500

 

Orange Red

#FF4500

 

Orchid

#DA70D6

 

Pale Golden Rod

#EEE8AA

 

Pale Green

#98FB98

 

Pale Turquoise

#AFEEEE

 

Pale Violet Red

#DB7093

 

Papaya Whip

#FFEFD5

 

Peach Puff

#FFDAB9

 

Peru

#CD853F

 

Pink

#FFC0CB

 

Plum

#DDA0DD

 

Powder Blue

#B0E0E6

 

Purple

#800080

 

Rebecca Purple

#663399

 

Red

#FF0000

 

Rosy Brown

#BC8F8F

 

Royal Blue

#4169E1

 

Saddle Brown

#8B4513

 

Salmon

#FA8072

 

Sandy Brown

#F4A460

 

Sea Green

#2E8B57

 

Sea Shell

#FFF5EE

 

Sienna

#A0522D

 

Silver

#C0C0C0

 

Sky Blue

#87CEEB

 

Slate Blue

#6A5ACD

 

Slate Gray

#708090

 

Snow

#FFFAFA

 

Spring Green

#00FF7F

 

Steel Blue

#4682B4

 

Tan

#D2B48C

 

Teal

#008080

 

Thistle

#D8BFD8

 

Tomato

#FF6347

 

Turquoise

#40E0D0

 

Violet

#EE82EE

 

Wheat

#F5DEB3

 

White

#FFFFFF

 

White Smoke

#F5F5F5

 

Yellow

#FFFF00

 

Yellow Green

#9ACD32


Sebelumnya
BAB 011 - Comment
  Berikutnya
BAB 013 - Hyperlink

 

(1) Komentar

avatar user

widodo20 Feb 2019

usul buat versi pdf juga min

Beri komentar





Hanya komentar yang sudah di-approve admin yang tampil.

KESIMPULAN : Ada 5 macam metode penentuan warna HTML, yaitu : Nama Warna HEX (nilai warna) RGB HSL RGBA HSLA. Yang paling umum digunakan adalah metode Nama Warna & HEX. Kita fokus pada metode Nama Warna & HEX saja, yang selainnya saya hanya memberikan penjelasan umum saja.     Nama Warna Dalam HTML, warna dapat ditentukan dengan menggunakan nama warna: Contoh : red -> menghasilkan warna merah green -> menghasilkan warna hijau black -> menghasilkan warna hitam     Metode HEX Dalam HTML, warna juga dapat ditentukan menggunakan nilai HEX (hexa decimal) Contoh : #FF0000 -> menghasilkan warna merah #008000 -> menghasilkan warna hijau     Metode RGB Dalam HTML, warna dapat ditentukan sebagai nilai RGB, menggunakan rumus ini: rgb (red, green, blue) Setiap parameter (merah, hijau, dan biru) menentukan intensitas warna antara 0 dan 255. Contoh : rgb(255, 0, 0) -> menghasilkan warna merah rgb(0, 255, 0) -> menghasilkan warna hijau rgb(0, 0, 0) -> menghasilkan warna hitam rgb(255, 255, 255) -> menghasilkan warna hitam     Metode HSL Dalam HTML, warna dapat ditentukan menggunakan rona, saturasi, dan cahaya (HSL) dalam bentuk: hsl ( hue , saturation , lightness ) Hue adalah gelar pada rona warna dari 0 hingga 360. 0 berwarna merah, 120 berwarna hijau, dan 240 berwarna biru. Saturasi adalah nilai persentase, 0% berarti warna abu-abu, dan 100% adalah warna penuh. Kecerahan juga persentase, 0% hitam, 50% tidak terang atau gelap, 100% putih Contoh : hsl(0, 100%, 50%) -> menghasilkan warna merah hsl(240, 100%, 50%) -> menghasilkan warna biru     Metode RGBA Nilai warna RGBA adalah perpanjangan dari nilai warna RGB dengan saluran Alpha - yang menentukan opacity untuk warna Nilai warna RGBA ditentukan dengan: rgba ( red, green, blue, alpha ) Parameter alfa adalah angka antara 0,0 (sepenuhnya transparan) dan 1,0 (tidak transparan sama sekali): Contoh : rgba(255, 0, 0, 0.3) --> menghasilkan warna merah transparant opacity 0.3 rgba(255, 0, 0, 1.0) --> menghasilkan warna merah tidak transparant opacity 1.0     Metode HSLA Nilai warna HSLA adalah perpanjangan dari nilai warna HSL dengan saluran alpha - yang menentukan opacity untuk warna. Nilai warna HSLA ditentukan dengan: hsla ( hue, saturation , lightness, alpha ) Parameter alfa adalah angka antara 0,0 (sepenuhnya transparan) dan 1,0 (tidak transparan sama sekali): Contoh : hsla(0, 100%, 50%, 0.3) --> menghasilkan warna merah transparant opacity 0.3 hsla(0, 100%, 50%, 0.3) --> menghasilkan warna merah tidak transparant opacity 1.0     Tabel Warna Nama Warna HEX   Alice Blue #F0F8FF   Antique White #FAEBD7   Aqua #00FFFF   Aquamarine #7FFFD4   Azure #F0FFFF   Beige #F5F5DC   Bisque #FFE4C4   Black #000000   Blanched Almond #FFEBCD   Blue #0000FF   Blue Violet #8A2BE2   Brown #A52A2A   Burly Wood #DEB887   Cadet Blue #5F9EA0   Chartreuse #7FFF00   Chocolate #D2691E   Coral #FF7F50   Cornflower Blue #6495ED   Cornsilk #FFF8DC   Crimson #DC143C   Cyan #00FFFF   Dark Blue #00008B   Dark Cyan #008B8B   Dark Golden Rod #B8860B   Dark Gray #A9A9A9   Dark Green #006400   Dark Khaki #BDB76B   Dark Magenta #8B008B   Dark Olive Green #556B2F   Dark Orange #FF8C00   Dark Orchid #9932CC   Dark Red #8B0000   Dark Salmon #E9967A   Dark Sea Green #8FBC8F   Dark Slate Blue #483D8B   Dark Slate Gray #2F4F4F   Dark Turquoise #00CED1   Dark Violet #9400D3   Deep Pink #FF1493   Deep Sky Blue #00BFFF   Dim Gray #696969   Dodger Blue #1E90FF   Fire Brick #B22222   Floral White #FFFAF0   Forest Green #228B22   Fuchsia #FF00FF   Gainsboro #DCDCDC   Ghost White #F8F8FF   Gold #FFD700   Golden Rod #DAA520   Gray #808080   Green #008000   Green Yellow #ADFF2F   Honey Dew #F0FFF0   Hot Pink #FF69B4   Indian Red #CD5C5C   Indigo #4B0082   Ivory #FFFFF0   Khaki #F0E68C   Lavender #E6E6FA   Lavender Blush #FFF0F5   Lawn Green #7CFC00   Lemon Chiffon #FFFACD   Light Blue #ADD8E6   Light Coral #F08080   Light Cyan #E0FFFF   Light Golden Rod Yellow #FAFAD2   Light Gray #D3D3D3   Light Green #90EE90   Light Pink #FFB6C1   Light Salmon #FFA07A   Light Sea Green #20B2AA   Light Sky Blue #87CEFA   Light Slate Gray #778899   Light Steel Blue #B0C4DE   Light Yellow #FFFFE0   Lime #00FF00   Lime Green #32CD32   Linen #FAF0E6   Magenta #FF00FF   Maroon #800000   Medium Aqua Marine #66CDAA   Medium Blue #0000CD   Medium Orchid #BA55D3   Medium Purple #9370DB   Medium Sea Green #3CB371   Medium Slate Blue #7B68EE   Medium Spring Green #00FA9A   Medium Turquoise #48D1CC   Medium Violet Red #C71585   Midnight Blue #191970   Mint Cream #F5FFFA   Misty Rose #FFE4E1   Moccasin #FFE4B5   Navajo White #FFDEAD   Navy #000080   Old Lace #FDF5E6   Olive #808000   Olive Drab #6B8E23   Orange #FFA500   Orange Red #FF4500   Orchid #DA70D6   Pale Golden Rod #EEE8AA   Pale Green #98FB98   Pale Turquoise #AFEEEE   Pale Violet Red #DB7093   Papaya Whip #FFEFD5   Peach Puff #FFDAB9   Peru #CD853F   Pink #FFC0CB   Plum #DDA0DD   Powder Blue #B0E0E6   Purple #800080   Rebecca Purple #663399   Red #FF0000   Rosy Brown #BC8F8F   Royal Blue #4169E1   Saddle Brown #8B4513   Salmon #FA8072   Sandy Brown #F4A460   Sea Green #2E8B57   Sea Shell #FFF5EE   Sienna #A0522D   Silver #C0C0C0   Sky Blue #87CEEB   Slate Blue #6A5ACD   Slate Gray #708090   Snow #FFFAFA   Spring Green #00FF7F   Steel Blue #4682B4   Tan #D2B48C   Teal #008080   Thistle #D8BFD8   Tomato #FF6347   Turquoise #40E0D0   Violet #EE82EE   Wheat #F5DEB3   White #FFFFFF   White Smoke #F5F5F5   Yellow #FFFF00   Yellow Green #9ACD32

 

 

Step By Step Belajar HTML 5

 

 

Artikel Lainnya :