Issue
I'm creating a random order form and just wanted to know which colors I should use and for which elements. Fore example, I'm using rgb(11, 11, 93) for background and white for font color. But I need help with choosing the colors for other elements like the background-color for the input fields and what should be the height for the input field.
body {
background-color: rgb(11, 11, 93);
color: white;
font-family: 'Poppins', sans-serif;
font-size: 20px;
font-weight: 400;
line-height: 1.4;
margin: 0;
height: 100vh;
}
h1, p {
text-align: center;
}
p {
margin-top: -12px;
font-style: italic;
}
form {
max-width: 700px;
margin-right: auto;
margin-left: auto;
}
fieldset {
padding: 10px 0;
border: none;
border-bottom: 3px solid rgb(66, 23, 146);
}
label {
display: block;
font-size: 1.125rem;
}
input {
margin: 5px auto;
padding: 3px;
background:rgb(66, 23, 146);
color: aqua;
border: none;
border-radius: 7px;
}
#radio, #checkbox {
display: block
min-height: 1.5rem;
min-width: 1.25rem;
}
#bio {
display: block;
}
.input-field {
width: 40%;
height: 1.7em;
font-size: 17px;
}
.question {
font-size: 18px;
color:aqua
}
select {
display: block;
margin: 5px 0;
}
.input-field {
height: 20px;
}<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Build a Survey Form Project</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<h1 id="title">Order Form</h1>
<p id="description">Order any kind of responsive website for your business, blog, portfolio,etc.</p>
<form id="survey-form">
<fieldset id="bio">
<label id="name-label">Name: <input type="text" class="input-field" id="name" placeholder="Enter your name" required></label>
<label id="email-label">Email: <input type="email" class="input-field" id="email" placeholder="Enter your Email" required></label>
<label id="number-label">Age: <input type="number" min="16" max="70" class="input-field" placeholder="Age"></label>
</fieldset>
<fieldset>
<label class="question">What kind of Website are you looking for?
<select id="dropdown" class="input-field">
<option>(Select Website type)</option>
<option>Business</option>
<option>Blog</option>
<option>Personal</option>
<option>Portfolio</option>
</select>
</label>
<label class="question">Have you had a website in the past?</label>
<label><input type="radio" id="radio" name="yes-no" value="yes"> Yes</label>
<label><input type="radio" id="radio" name="yes-no" value="no"> No</label>
<label class="question">Which pages should be in your website?</label>
<label><input type="checkbox" id="checkbox" value="contact-page"> Home</label>
<label><input type="checkbox" id="checkbox" value="contact-page"> Contact</label>
<label><input type="checkbox" id="checkbox" value="contact-page">
Services</label>
<label><input type="checkbox" id="checkbox" value="contact-page"> Blog</label>
<label><input type="checkbox" id="checkbox" value="contact-page"> Portfolio</label>
<label><input type="checkbox" id="checkbox" value="contact-page"> Store</label>
<label><input type="checkbox" id="checkbox" value="contact-page"> About Us</label>
<label><input type="checkbox" id="checkbox" value="contact-page"> Privacy Policy</label>
<label><input type="checkbox" id="checkbox" value="contact-page"> Terms and Conditions</label>
</fieldset>
</form>
</body>
</html>You can say that I've completed the basic layout. I'm inserting the code for you to look at what I've created. One more thing. I'm learning web development and and this is just a practice project that I need help with.
Solution
There's a lot of subjectivity to questions like this, as there is no "best" color scheme, in general, for anything. One way to get started with color is to think about not just the color but the value of the color: how light or dark it is. Colors may look great in isolation but play poorly together due to any number of variables, but if the values are correct, you can guarantee legibility.
The colors you choose anywhere in design are not random, and you need to consider things such as your audience, the aesthetic you are trying to achieve, legibility, accessibility, the type of screen and time of day (light vs. dark modes), etc.
When in doubt, copy what others have done before you. Look at a website that feels good to you, try to learn from the choices they made. Are their input fields the same size as their type? Are they larger? How much white-space/padding/margin are they using? What colors are the type, how dark or light are they compared to the background? Is it easy to read?
If you just need to pick anything at random, you can also try copying from a palette like one of the randomly generated ones at https://coolors.co/generate.
Answered By - loomy
