Блог

Я использую приведенный ниже код, чтобы создать ion-button градиент.

 --background: linear-gradient(to right, #E49273, #DB6E44);
 

Я пытаюсь воспроизвести макет, который я сделал в Affinity Photo, но цвета совершенно разные, несмотря на использование одного и того же шестнадцатеричного кода.

CSS слева, макет справа

Когда я использую редактор фотографий и получаю подсказки из CSS-рендеринга по сравнению с макетом, они совершенно разные. ( #C1734D против #FE6835 и #CE9578 против #FE8E6E ).

Почему это так и как я могу это исправить?

HTML

 <ion-button expand="block" shape="round" class="customButton">
   Click me
</ion-button>
 

scss

 .customButton {
    // background: #db6e44; /* fallback for old browsers */
    // background: -webkit-linear-gradient(to right, #e49273, #db6e44); /* Chrome 10-25, Safari 5.1-6 */
    // background: linear-gradient(
    //     to right,
    //     #e49273,
    //     #db6e44
    // ); /* W3C, IE 10 / Edge, Firefox 16 , Chrome 26 , Opera 12 , Safari 7  */
    --background: #db6e44; /* fallback for old browsers */
    --background: -webkit-linear-gradient(to right, #e49273, #db6e44); /* Chrome 10-25, Safari 5.1-6 */
    --background: linear-gradient(
        to right,
        #e49273,
        #db6e44
    ); /* W3C, IE 10 / Edge, Firefox 16 , Chrome 26 , Opera 12 , Safari 7  */
}