style.css

@import url('https://fonts.googleapis.com/css?family=Montserrat');

body {
	margin: 0;
}

label {
	color: white;
	font-size: 20px;
	font-weight: bold;
	-webkit-transition: .3s; 
    transition: color .3s
}

.rgbValues input {
	background: transparent;
	border-color: white;
	border-style: solid;
	border-top: none;
	border-left: none;
	border-right: none;
	outline: none;
	font-family: 'Montserrat', sans-serif;
	width: 10%;
	font-size: 80%;
	color: white;
	text-align: center;
	-webkit-transition: .3s; 
    transition: border-color .3s
    transition: color .3s
}

.container {
	width: 100vw;
	height: 100vh;
	background-color: rgb(0,0,0);
	transition: background-color 500ms;
}

.rgbValues {
	font-size: 5vw;
	font-family: 'Montserrat', sans-serif;
	color: white;
	text-align: center;
	position: absolute;
	top: 35%;
	left: 50%;
	transform: translate(-50%, -50%);
	width: 90%;
	-webkit-transition: .3s; 
    transition: color .3s
}

.colorPicker {
	position: absolute;
	top: 68%;
	left: 50%;
	transform: translate(-50%, -50%);
	text-align: center;
	font-family: 'Montserrat', sans-serif;
}

.colorPicker input {
	-webkit-appearance: none;  /* Override default CSS styles */
    appearance: none;
    display: block;
    border: none;
    width: 40vw; 
    height: 4px; 
    background: white; 
    outline: none; 
    -webkit-transition: .2s; 
    transition: background .2s;
    margin: 25px;
}

.colorPicker input::-webkit-slider-thumb {
    -webkit-appearance: none; 
    appearance: none;
    width: 25px; 
    height: 25px;
    border: 1px solid black;
    border-radius: 20px;
    background: white; 
    cursor: pointer; 
}

/* For Firefox remove arrow menu input field*/
input[type='number'] {
    -moz-appearance:textfield;
}

/* Webkit browsers like Safari and Chrome remove arrow menu input field */
input[type=number]::-webkit-inner-spin-button, input[type=number]::-webkit-outer-spin-button {
    -webkit-appearance: none;
    margin: 0;
}