IcyMat Design

Kolory

Przy tworzeniu palety kolorów należy wykorzystać kolory zdefiniowane w domyślej palecie kolorów. Kolory przewodnie zaliczają się do pastelowych barw, a ich rozjaśnione wersje tworzy się poprzez nałożenie białej lub czarnej maski z przezroczystością ustawioną odpowiednio na 80%, 60%, 40% lub 20%.

180%	160%	140%	120%	Kolor bazowy	80%	60%	40%	20%
#2b0404	#560808	#820c0c	#ad1010	red (#d81414)	#e04343	#e87272	#efa1a1	#f7d0d0
#24042b	#480855	#6d0b80	#910faa	magenta (#b513d5)	#c442dd	#d371e6	#e1a1ee	#f0d0f7
#100823	#201046	#31186a	#41208d	violet (#5128b0)	#7453c0	#977ed0	#b9a9df	#dcd4ef
#04112b	#082256	#0c3382	#1044ad	blue (#1455d8)	#4377e0	#7299e8	#a1bbef	#d0ddf7
#10272c	#204e58	#307585	#409cb1	cyan (#50c3dd)	#73cfe4	#96dbeb	#b9e7f1	#dcf3f8
#041e19	#083d32	#0c5b4a	#107a63	teal (#14987c)	#43ad96	#72c1b0	#a1d6cb	#d0eae5
#031e03	#073c06	#0a5a08	#0e780b	green (#11960e)	#41ab3e	#70c06e	#a0d59f	#cfeacf
#1d2500	#3a4a00	#576e00	#749300	lime (#91b800)	#a7c633	#bdd466	#d3e399	#e9f1cc
#302a04	#615509	#917f0d	#c2aa12	yellow (#f2d416)	#f5dd45	#f7e573	#faeea2	#fcf6d0
#332201	#664303	#996504	#cc8606	amber (#ffa807)	#ffb939	#ffcb6a	#ffdc9c	#ffeecd
#2a1700	#542d00	#7e4400	#a85a00	orange (#d27100)	#db8d33	#e4aa66	#edc699	#f6e3cc
#1a0e00	#341c00	#4f2b00	#693900	brown (#834700)	#9c6c33	#b59166	#cdb599	#e6dacc

180%	160%	140%	120%	Kolor bazowy	80%	60%	40%	20%
#333333	#666666	#999999	#cccccc	white (#ffffff)
#262626	#4d4d4d	#737373	#9a9a9a	silver (#c0c0c0)	#cdcdcd	#d9d9d9	#e6e6e6	#f2f2f2
#151607	#2b2c0e	#404214	#56581b	olive (#6b6e22)	#898b4e	#a6a87a	#c4c5a7	#e1e2d3
#0a0a0a	#141414	#1f1f1f	#292929	gray (#333333)	#5c5c5c	#858585	#adadad	#d6d6d6
				black (#000000)	#333333	#666666	#999999	#cccccc

Kolor dodatkowy

W ramach każdego projektu istnieje możliwość zdefiniowania dodatkowego koloru wyróżniającego, który podlega takim samym regułom jak kolory z domyślnej palety kolorów. Poniżej znajdują się przykłady z odpowiednich projektów.

20%	40%	60%	80%	Kolor bazowy	80%	60%	40%	20%
				IcyMat
				Andra

Generator palety kolorów

Podaj kolor bazowy Podaj nazwę kolou

20%	40%	60%	80%	Kolor bazowy	80%	60%	40%	20%
#031e03	#073c06	#0a5a08	#0e780b	#11960e	#41ab3e	#70c06e	#a0d59f	#cfeacf

Kod CSS

.imd-bg- {
    background: ;
}

.imd-bg-80- { background: ; }
.imd-bg-60- { background:  }
.imd-bg-40- { background:  }
.imd-bg-20- { background:  }
.imd-bg-120- { background: ; }
.imd-bg-140- { background:  }
.imd-bg-160- { background:  }
.imd-bg-180- { background:  }

.imd-bg-before-::before {
    background-color: ;
}

.imd-bg-transparent- { background: rgba(, , , 0.80); }

.imd-bg-blur- {
    rgba(, , , 0.80);
    backdrop-filter: saturate(180%) blur(7px);
}

.imd-bg-hover-:hover {
    background-color: ;
}
.imd-bg-hover-80-:hover {background: ; }
.imd-bg-hover-60-:hover {background: ; }
.imd-bg-hover-40-:hover {background: ; }
.imd-bg-hover-20-:hover {background: ; }
.imd-bg-hover-120-:hover {background: ; }
.imd-bg-hover-140-:hover {background: ; }
.imd-bg-hover-160-:hover {background: ; }
.imd-bg-hover-180-:hover {background: ; }

.imd-text- {
    color:  !important;
}
.imd-text-:hover {
    color: ;
}
.imd-text-80- { color:  !important; }
.imd-text-80-:hover { color: ; }
.imd-text-60- { color:  !important; }
.imd-text-60-:hover { color: ; }
.imd-text-40- { color:  !important; }
.imd-text-40-:hover { color: ; }
.imd-text-20- { color:  !important; }
.imd-text-20-:hover { color: ; }
.imd-text-120- { color:  !important; }
.imd-text-120-:hover { color: ; }
.imd-text-140- { color:  !important; }
.imd-text-140-:hover { color: ; }
.imd-text-160- { color:  !important; }
.imd-text-160-:hover { color: ; }
.imd-text-180- { color:  !important; }
.imd-text-180-:hover { color: ; }

.imd-border-color- {
    border-color:  !important;
}

.imd-border-color- tr,
.imd-border-color- th,
.imd-border-color- td {
    border-color:  !important;
}

.imd-border-color-80- { border-color:  !important; }
.imd-border-color-80- * { border-color: ; }
.imd-border-color-60- { border-color:  !important; }
.imd-border-color-60- * { border-color: ; }
.imd-border-color-40- { border-color:  !important; }
.imd-border-color-40- * { border-color:  !important; }
.imd-border-color-20- { border-color: ; }
.imd-border-color-20- * { border-color:  !important; }
.imd-border-color-120- { border-color: ; }
.imd-border-color-120- * { border-color:  !important; }
.imd-border-color-140- { border-color: ; }
.imd-border-color-140- * { border-color:  !important; }
.imd-border-color-160- { border-color: ; }
.imd-border-color-160- * { border-color:  !important; }
.imd-border-color-180- { border-color: ; }
.imd-border-color-180- * { border-color:  !important; }

.imd-section-glass- { border-top-color: rgba(, , , 0.80) !important; }

.imd-placeholder-::placeholder {
    color: ;
    opacity: 1;
}

.imd-placeholder-:-ms-input-placeholder {
    color: ;
}

.imd-placeholder-::-ms-input-placeholder {
    color: ;
}