PoradnikTypografia Projektanci fontów Tworzenie fontów Fonty do kamienia Typografia w kamieniu Formaty fontów Funkcje OpenType Ligatury Kapitaliki Kerning w fontach Polskie litery Jak sprawdzić?Anatomia litery Podstawy Braille'a Instalowanie fontów Języki i litery Fonty wielojęzyczne Gutenberg

Kolory HTML

™

Kolory HTML i kody HEX dla projektantów oraz typografów

KOLORY w HTML są reprezentowane za pomocą kodów, składających się z symbolu # i sześciu cyfr lub liter, które reprezentują wartości kolorów RGB (Red, Green, Blue).

Kolory HTML i kody HEX należą do podstawowych narzędzi współczesnego projektowania stron internetowych, interfejsów i publikacji cyfrowych. Odpowiednio dobrana paleta barw wpływa nie tylko na estetykę projektu, lecz także na czytelność tekstu i odbiór typografii.

Poniższa tabela zawiera popularne kolory HTML wraz z kodami HEX oraz ich praktycznym zastosowaniem. Zestawienie może być pomocne podczas projektowania stron WWW, materiałów drukowanych, prezentacji i interfejsów użytkownika.

#660033

#990033

#cc0033

#ff0033

#ff3366

#cc3366

#cc0066

#993366

#cc3399

#ff66cc

#ff99cc

#ffccff

#ff99ff

#ff9999

#ff6699

#ff0066

#ff0099

#ff3399

#ff00cc

#ff33cc

#ff66ff

#ff33ff

#FF00FF Fuchsia

#cc0099

#990066

#cc33cc

#cc66cc

#cc99ff

#cc66ff

#cc33ff

#cc00cc

#cc00ff

#9900cc

#990099

#993399

#9966cc

#cc99cc

#996699

#663399

#663366

#660066

#660099

#9933cc

#9900ff

#9966ff

#6633cc

#6600cc

#330033

#330066

#6600ff

#6633ff

#ccccff

#9999ff

#9999cc

#6666cc

#6666ff

#666699

#333366

#333399

#330099

#3300cc

#3300ff

#3333ff

#3333cc

#0066ff

#0033ff

#3366ff

#3366cc

#000066

#000033

#0000FF Blue

#000099

#0033cc

#0000cc

#336699

#0066cc

#99ccff

#6699ff

#003366

#6699cc

#006699

#3399cc

#0099cc

#66ccff

#3399ff

#003399

#0099ff

#33ccff

#00ccff

#99ffff

#66ffff

#33ffff

#00FFFF Aqua

#00cccc

#009999

#669999

#99cccc

#ccffff

#33cccc

#66cccc

#339999

#336666

#006666

#003333

#00ffcc

#00cc99

#66ffcc

#99ffcc

#00ff99

#339966

#006633

#336633

#669966

#66cc66

#99ff99

#66ff66

#99cc99

#33ff99

#00cc66

#66cc99

#009966

#009933

#00ff66

#ccffcc

#ccff99

#99ff66

#00ff33

#00cc33

#66ff33

#00FF00 Lime

#66cc33

#006600

#003300

#009900

#33ff00

#66ff00

#99ff00

#66cc00

#339900

#33cc00

#99cc66

#99cc33

#669933

#336600

#669900

#99cc00

#ccff66

#ccff00

#999900

#333300

#666600

#999933

#cccc33

#cccc66

#666633

#999966

#cccc99

#ffffcc

#ffff99

#FFFF00 Yellow

#ffcc00

#ffcc66

#ffcc33

#cc9933

#996600

#cc9900

#ff9900

#cc6600

#993300

#cc6633

#ff9933

#ff9966

#ff6633

#ff6600

#cc3300

#996633

#663300

#330000

#663333

#996666

#993333

#cc6666

#cc9999

#ffcccc

#ff6666

#ff3333

#cc3333

#660000

#990000

#cc0000

#FF0000 Red

#ff3300

#cc9966

#B5A642

#8C7853

#A67D3D

#5F9F9F

#5C4033

#5c3317

#2F4F2F

#4A766E

#4F4F2f

#9932CD

#9f5f9f

#871F78

#6b238E

#2F4F4F

#97694F

#7093DB

#855E42

#545454

#856363

#D19275

#A62A2A

#4E2F2F

#8E2323

#CD7F32

#F5CCB0

#DBDB70

#93DB70

#70DB93

#238E23

#527F76

#215E21

#9F9F5F

#C0D9D9

#C0C0C0 Silver

#A8A8A8

#8F8FBD

#E9C2A6

#32CD99

#32CD32

#6B8E23

#9370DB

#DB7093

#FF6EC7

#8E236B

#2F2F4F

#23238E

#00009C

#3232CD

#4D4DFF

#EBC79E

#CFB53B

#FF7F00

#FF2400

#DB70DB

#8FBC8F

#BC8F8F

#5959AB

#4F2F4F

#6F4242

#8C1717

#6B4226

#8E6B23

#A68064

#E47833

#DB9370

#D8BFD8

#3299CC

#236B8E

#38B0DE

#ADEAEA

#ffebee

#ffcdd2

#ef9a9a

#e57373

#ef5350

#f44336

#e53935

#d32f2f

#c62828

#b71c1c

#ff8a80

#ff5252

#ff1744

#fce4ec

#f8bbd0

#f48fb1

#f06292

#ec407a

#e91e63

#d81b60

#c2185b

#ad1457

#880e4f

#ff80ab

#ff4081

#f50057

#c51162

#f3e5f5

#e1bee7

#ce93d8

#ba68c8

#ab47bc

#9c27b0

#8e24aa

#7b1fa2

#6a1b9a

#4a148c

#ea80fc

#e040fb

#d500f9

#aa00ff

#ede7f6

#d1c4e9

#b39ddb

#9575cd

#7e57c2

#673ab7

#5e35b1

#512da8

#4527a0

#311b92

#b388ff

#7c4dff

#651fff

#6200ea

#e8eaf6

#c5cae9

#9fa8da

#7986cb

#5c6bc0

#3f51b5

#3949ab

#303f9f

#283593

#1a237e

#8c9eff

#536dfe

#3d5afe

#304ffe

#e3f2fd

#bbdefb

#90caf9

#64b5f6

#42a5f5

#2196f3

#1e88e5

#1976d2

#1565c0

#0d47a1

#82b1ff

#448aff

#2979ff

#2962ff

#e1f5fe

#b3e5fc

#81d4fa

#4fc3f7

#29b6f6

#03a9f4

#039be5

#0288d1

#0277bd

#01579b

#80d8ff

#40c4ff

#00b0ff

#0091ea

#e0f7fa

#b2ebf2

#80deea

#4dd0e1

#26c6da

#00bcd4

#00acc1

#0097a7

#00838f

#006064

#84ffff

#18ffff

#00e5ff

#00b8d4

#e0f2f1

#b2dfdb

#80cbc4

#4db6ac

#26a69a

#009688

#00897b

#00796b

#00695c

#004d40

#a7ffeb

#64ffda

#1de9b6

#00bfa5

#e8f5e9

#c8e6c9

#a5d6a7

#81c784

#66bb6a

#4caf50

#43a047

#388e3c

#2e7d32

#1b5e20

#b9f6ca

#69f0ae

#00e676

#00c853

#f1f8e9

#dcedc8

#c5e1a5

#aed581

#9ccc65

#8bc34a

#7cb342

#689f38

#558b2f

#33691e

#ccff90

#b2ff59

#76ff03

#64dd17

#f9fbe7

#f0f4c3

#e6ee9c

#dce775

#d4e157

#cddc39

#c0ca33

#afb42b

#9e9d24

#827717

#f4ff81

#eeff41

#c6ff00

#aeea00

#fffde7

#fff9c4

#fff59d

#fff176

#ffee58

#ffeb3b

#fdd835

#fbc02d

#f9a825

#f57f17

#ffff8d

#ffff00

#ffea00

#ffd600

#fff8e1

#ffecb3

#ffe082

#ffd54f

#ffca28

#ffc107

#ffb300

#ffa000

#ff8f00

#ff6f00

#ffe57f

#ffd740

#ffc400

#ffab00

#fff3e0

#ffe0b2

#ffcc80

#ffb74d

#ffa726

#ff9800

#fb8c00

#f57c00

#ef6c00

#e65100

#ffd180

#ffab40

#ff9100

#ff6d00

#fbe9e7

#ffccbc

#ffab91

#ff8a65

#ff7043

#ff5722

#f4511e

#e64a19

#d84315

#bf360c

#ff9e80

#ff6e40

#ff3d00

#dd2c00

#efebe9

#d7ccc8

#bcaaa4

#a1887f

#8d6e63

#795548

#6d4c41

#5d4037

#4e342e

#3e2723

#757575

#616161

#424242

#212121

#eceff1

#cfd8dc

#b0bec5

#90a4ae

#78909c

#607d8b

#546e7a

#455a64

#37474f

#263238

#ffffff White

#fbfbfb

#f9f9f9

#f6f6f6

#f3f3f3

#f1f1f1

#efefef

#ececec

#e9e9e9

#e6e6e6

#e3e3e3

#e0e0e0

#dedede

#dcdcdc

#dadada

#d7d7d7

#d5d5d5

#d2d2d2

#cfcfcf

#cdcdcd

#cbcbcb

#c7c7c7

#c4c4c4

#c2c2c2

#bdbdbd

#bbbbbb

#b8b8b8

#b5b5b5

#b2b2b2

#afafaf

#adadad

#aaaaaa

#a7a7a7

#a4a4a4

#a1a1a1

#9e9e9e

#9c9c9c

#999999

#969696

#939393

#909090

#8d8d8d

#8a8a8a

#878787

#848484

#818181

#7e7e7e

#7c7c7c

#797979

#757575

#717171

#6d6d6d

#696969 DimGray

#666666

#626262

#5f5f5f

#5a5a5a

#565656

#535353

#4f4f4f

#4c4c4c

#494949

#464646

#434343

#414141

#3f3f3f

#3d3d3d

#3a3a3a

#363636

#323232

#2e2e2e

#2a2a2a

#262626

#1f1f1f

#191919

#0e0e0e

#000000 Black

Kolor a czytelność fontów i typografia

Dobór koloru tekstu jest równie ważny jak wybór kroju pisma. Nawet najlepszy font może stracić czytelność przy niewłaściwym kontraście lub le dobranym tle. W typografii liczy się nie tylko wygląd liter, ale również komfort odbioru tekstu.

Kroje techniczne, edukacyjne i użytkowe zwykle najlepiej sprawdzają się przy wysokim kontraście – na przykład ciemny tekst na jasnym tle. Fonty dekoracyjne lub stylizowane mogą wymagać bardziej stonowanych zestawień kolorystycznych, które podkreślają charakter projektu bez pogarszania czytelności.

Projektując strony internetowe lub materiały drukowane warto pamiętać, że kolor wpływa na emocjonalny odbiór tekstu, hierarchię informacji oraz dostępność treści dla osób z ograniczeniami widzenia.

Jak kolory współpracują z typografią

Różne grupy kolorów mogą wzmacniać charakter wybranego kroju pisma i całego projektu.

Niebieskie i chłodne barwy – często stosowane w dokumentacji, projektach technicznych i materiałach edukacyjnych.
Ciemne kolory i odcienie granitu – dobrze współgrają z liternictwem kamieniarskim i napisami wykonywanymi w kamieniu.
Wysoki kontrast – szczególnie ważny w projektach nastawionych na czytelność i dostępność.
Stonowane kolory – pozwalają wyeksponować dekoracyjne i historyczne kroje pisma.

Zobacz także

Polecamy również poradniki i specjalistyczne fonty związane z typografią:

Generator Kolorów Online

Użyj kursora oraz pionowego paska do wygenerowania koloru i kodu:

Twoja przeglądarka nie obsługuje ramek pływających!

Skopiuj wygenerowany kod (z krzyżykiem) lub wpisz własny kod i przetestuj kolor

^ do góry

Uwaga: Materiałów z Poradnika nie można umieszczać w innych serwisach bez zgody Autora

FONTY NA ZAMÓWIENIE