Welcome!

By registering with us, you'll be able to discuss, share and private message with other members of our community.

SignUp Now!
  • Guest, before posting your code please take these rules into consideration:
    • It is required to use our BBCode feature to display your code. While within the editor click < / > or >_ and place your code within the BB Code prompt. This helps others with finding a solution by making it easier to read and easier to copy.
    • You can also use markdown to share your code. When using markdown your code will be automatically converted to BBCode. For help with markdown check out the markdown guide.
    • Don't share a wall of code. All we want is the problem area, the code related to your issue.


    To learn more about how to use our BBCode feature, please click here.

    Thank you, Code Forum.

HTML & CSS What tools should I use for color matching?

D

dt65231

Coder
What tools should I use for color matching?
I got a task: pdf file.
I took the program with a "pipette".
Got the color code.
I paste it into HTML.
Result: the colors in the task and the HTML page do not match.
How to choose a color?20.08.2022_23-44-35.png
 
Solution
D
Ok. I see this in your code background-color: #fae1c4; which is indeed the background color of your "Result" image.
However, the background color of your "Task" image is #EFEBE0. Why didn't you paste that value ? How did you get by #fae1c4 ? Note, I used the Screen Color Picker function of Faststone Capture for Windows.
Sort by date Sort by votes
cbreemer said:
Show your HTML/CSS code !
Click to expand...
index.html
HTML: 
<!DOCTYPE html>
<html lang="ru">

<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">
    <link rel="stylesheet" href="./css/style.css">
    <title>История лагеря</title>
</head>

<body>
    <div class="history">
        <div class="history__nav">
            <div class="history__titles">
                <div class="history__title">История создания</div>
                <div class="history__sub-title">План-схема лагеря</div>
            </div>
            <div class="history__btns">
                <a href="#" class="history__btn"> <span>План-схема лагеря</span>
                    <img src="./img/btn.png" alt="">
                </a>
                <a href="#" class="history__btn"><span>В главное меню </span>
                    <img src="./img/btn.png" alt="">

                </a>
            </div>
        </div>
        <div class="text">
            <div class="history__text">
                <div class="history__first-text">
                    <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Eveniet velit exercitationem commodi
                        distinctio necessitatibus esse atque. Libero, ducimus cumque! Aperiam nemo natus ipsa consequuntur
                        facilis similique deleniti, sunt omnis repudiandae mollitia possimus harum provident ullam nesciunt
                        tenetur fugiat fugit, at esse blanditiis pariatur eum. Sed inventore laudantium corporis architecto
                        eaque dolore error fugiat quia adipisci nesciunt totam modi nemo quam reiciendis eius eveniet nisi,
                        placeat omnis delectus maxime aliquid cumque.</p>
                </div>
                <div class="history__second-text">
                    <p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Alias voluptatem veritatis magnam impedit
                        asperiores ab vero accusamus quas, ratione repellendus provident qui saepe iure dolores praesentium
                        itaque exercitationem nostrum esse eius soluta ex? Nemo quasi recusandae nostrum, quos,
                        exercitationem
                        cumque assumenda ab corrupti itaque facere ad laudantium possimus aliquam tenetur qui eum officiis
                        iure fuga sunt. Accusamus accusantium iusto culpa.</p>
                    <p>Lorem ipsum dolor, sit amet consectetur adipisicing elit. Libero optio voluptates officia esse,
                        quidem
                        quo sint distinctio. Culpa quas cupiditate, amet officiis est eius libero architecto delectus.
                        Voluptatem, asperiores debitis provident, odio vel itaque suscipit quasi ullam quam nam ducimus.
                    </p>
                    <p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Alias voluptatem veritatis magnam impedit
                        asperiores ab vero accusamus quas, ratione repellendus provident qui saepe iure dolores praesentium
                        itaque exercitationem nostrum esse eius soluta ex? Nemo quasi recusandae nostrum, quos,
                        exercitationem
                        cumque assumenda ab corrupti itaque facere ad laudantium possimus aliquam tenetur qui eum officiis
                        iure fuga sunt. Accusamus accusantium iusto culpa.</p>
                    <p>Lorem ipsum dolor, sit amet consectetur adipisicing elit. Libero optio voluptates officia esse,
                        quidem
                        quo sint distinctio. Culpa quas cupiditate, amet officiis est eius libero architecto delectus.
                        Voluptatem, asperiores debitis provident, odio vel itaque suscipit quasi ullam quam nam ducimus.
                    </p>
                </div>
            </div>
            <div class="line"></div>
        </div>
        <div class="history__gallery">
            <div class="history__image">
                <img src="./img/01.jpg" alt="image of building">
            </div>
            <div class="history__image">
                <img src="./img/02.jpg" alt="image of tree">
            </div>
            <div class="history__image">
                <img src="./img/03.jpg" alt="image of building">
            </div>

        </div>
    </div>
</body>

</html>

style.scss
CSS: 
@import "_nullstyle.scss";

body{
    font-family: Arial, "Helvetica Neue", Helvetica, sans-serif;
}



.history {
    background-color: #fae1c4;
    padding: 20px 10px 10px 10px;
    height: 100vh;
    min-width: 100vh;
    display: flex;
    overflow: hidden;
}

.history__nav {
    flex: 1 1 17%;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}
.history__title {
    color:#6d614a;
    margin-bottom: 40px;
    position: relative;
    font-size: 32px;
}


.history__sub-title {
    position: relative;
    font-size: 25px;
}
.history__sub-title::before{
    content: '';
    position: absolute;
    display: block;
    width: 260px;
    height: 1px;
    background-color: black;
    top: 170%;
    left: -35px;
}

.history__btn {
    position: relative;
    display: inline-flex;
    font-size: 20px;
    padding: 20px 29px 35px 25px;
    border-radius: 20px;
    text-align: center;
    cursor: pointer;
    overflow: hidden;
}
.history__btn img{
    position: absolute;
    left: -45px;
    top: -60px;
    width: 600px;
}
.history__btn span{
    z-index: 20;

}
.text{
    padding-top: 50px;
    flex: 1 1 50%;
    padding-bottom: 60px;
    padding-right: 50px;
}
.history__text {
    line-height: 150%;
    height: 73vh;
    overflow-y: scroll;
    overflow-x: hidden;
}
.line{
    margin-left: 50%;
    height: 1px;
    width:45%;
    background-color: black;
}
.history__text {
    margin-bottom: 20px;
}
.history__second-text {
}
.history__gallery {
    flex: 1 1 20%;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}
.history__image{
    min-width: 100%;
position: relative;
padding-bottom: 55%;
margin-bottom: 15px;
}
.history__image img{
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    object-fit: cover;
}


_nullstyle.scss
CSS: 
/*Обнуление*/
* {
    padding: 0;
    margin: 0;
 }
 *,
 *:before,
 *:after {
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
 }
 :focus,
 :active {
    outline: none;
 }
 a{
    color: inherit;
    font-size: inherit;
 }
 a:focus,
 a:active {
    outline: none;
 }
 nav,
 footer,
 header,
 aside {
    display: block;
 }
 html,
 body {
    height: 100%;
    width: 100%;
    font-size: 100%;
    line-height: 1;
    font-size: 20px;
    -ms-text-size-adjust: 100%;
    -moz-text-size-adjust: 100%;
    -webkit-text-size-adjust: 100%;
 }
 input,
 button,
 textarea {
    font-family: inherit;
 }
 input::-ms-clear {
    display: none;
 }
 button {
    cursor: pointer;
 }
 button::-moz-focus-inner {
    padding: 0;
    border: 0;
 }
 a,
 a:visited {
    text-decoration: none;
 }
 a:hover {
    text-decoration: none;
 }
 ul li {
    list-style: none;
 }
 img {
    vertical-align: top;
 }
 h1,
 h2,
 h3,
 h4,
 h5,
 h6 {
    font-size: inherit;
    font-weight: inherit;
 }
 /*--------------------*/



style.css
CSS: 
@charset "UTF-8";
/*Обнуление*/
* {
  padding: 0;
  margin: 0;
}

*,
*:before,
*:after {
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
}

:focus,
:active {
  outline: none;
}

a {
  color: inherit;
  font-size: inherit;
}

a:focus,
a:active {
  outline: none;
}

nav,
footer,
header,
aside {
  display: block;
}

html,
body {
  height: 100%;
  width: 100%;
  font-size: 100%;
  line-height: 1;
  font-size: 20px;
  -ms-text-size-adjust: 100%;
  -moz-text-size-adjust: 100%;
  -webkit-text-size-adjust: 100%;
}

input,
button,
textarea {
  font-family: inherit;
}

input::-ms-clear {
  display: none;
}

button {
  cursor: pointer;
}

button::-moz-focus-inner {
  padding: 0;
  border: 0;
}

a,
a:visited {
  text-decoration: none;
}

a:hover {
  text-decoration: none;
}

ul li {
  list-style: none;
}

img {
  vertical-align: top;
}

h1,
h2,
h3,
h4,
h5,
h6 {
  font-size: inherit;
  font-weight: inherit;
}

/*--------------------*/
body {
  font-family: Arial, "Helvetica Neue", Helvetica, sans-serif;
}

.history {
  background-color: #fae1c4;
  padding: 20px 10px 10px 10px;
  height: 100vh;
  min-width: 100vh;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  overflow: hidden;
}

.history__nav {
  -webkit-box-flex: 1;
      -ms-flex: 1 1 17%;
          flex: 1 1 17%;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between;
}

.history__title {
  color: #6d614a;
  margin-bottom: 40px;
  position: relative;
  font-size: 32px;
}

.history__sub-title {
  position: relative;
  font-size: 25px;
}

.history__sub-title::before {
  content: '';
  position: absolute;
  display: block;
  width: 260px;
  height: 1px;
  background-color: black;
  top: 170%;
  left: -35px;
}

.history__btn {
  position: relative;
  display: -webkit-inline-box;
  display: -ms-inline-flexbox;
  display: inline-flex;
  font-size: 20px;
  padding: 20px 29px 35px 25px;
  border-radius: 20px;
  text-align: center;
  cursor: pointer;
  overflow: hidden;
}

.history__btn img {
  position: absolute;
  left: -45px;
  top: -60px;
  width: 600px;
}

.history__btn span {
  z-index: 20;
}

.text {
  padding-top: 50px;
  -webkit-box-flex: 1;
      -ms-flex: 1 1 50%;
          flex: 1 1 50%;
  padding-bottom: 60px;
  padding-right: 50px;
}

.history__text {
  line-height: 150%;
  height: 73vh;
  overflow-y: scroll;
  overflow-x: hidden;
}

.line {
  margin-left: 50%;
  height: 1px;
  width: 45%;
  background-color: black;
}

.history__text {
  margin-bottom: 20px;
}

.history__gallery {
  -webkit-box-flex: 1;
      -ms-flex: 1 1 20%;
          flex: 1 1 20%;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between;
}

.history__image {
  min-width: 100%;
  position: relative;
  padding-bottom: 55%;
  margin-bottom: 15px;
}

.history__image img {
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  -o-object-fit: cover;
     object-fit: cover;
}

21.08.2022_08-09-30.png
 

Attachments

  • camp-history.zip
    1.1 MB · Views: 1
Upvote 0 Downvote
Ok. I see this in your code background-color: #fae1c4; which is indeed the background color of your "Result" image.
However, the background color of your "Task" image is #EFEBE0. Why didn't you paste that value ? How did you get by #fae1c4 ? Note, I used the Screen Color Picker function of Faststone Capture for Windows.
 
Upvote 1 Downvote
Solution

New Threads

Latest posts

Share this page

Buy us a coffee!

Code Academy Advertisement
DataCamp Advertisement

About Us

Code Forum is a community platform where coding enthusiasts can connect with other developers, engage in discussions, ask for help, and share their knowledge with a supportive community. It's a perfect place to improve your coding skills and to find a community of like-minded individuals who share your passion for coding.

Site links

Stay Connected

Back
Top Bottom