Devuan color Palette

pekman · 2017-05-27 01:23:41

Hey all.

Seen's Devuan sites, i capture this colors and compile this palette.

Devuan palette color

Cheer's

Last edited by pekman (2017-05-27 07:32:41)

golinux · 2017-05-27 04:09:00

Nice thought to do that pekman! Someone was asking about the colors earlier today and I completely forgot about responding so this will come in handy.

Your palette is in the ballpark but several of those colors are not in the purpy theme for the website. And several colors are missing like the orange link hover color #C2540D. I have copied the purpy theme css below so you can get all the correct colors. Note that the colors are subtle and nuanced at different locations of the site:

$color0:   #7B7691; // background
$color1:   #E8E7F3; // text

$c-body-bg:    #FFFFFF; 
$c-body-fg:    #424252; 

$c-a-link:     #9AA12D;
$c-a-hover:    #C2540D;
$c-a-visited:  #A185B9;

$c-code-bg:    #F3F1F2;

$c-about-bg:   #6F6A83;

$c-donate-bg:               #A1B067;
$c-donate-fg:               #E5EDB0;

$c-donate-bg-hover:         #E5EDB0;
$c-donate-fg-hover:         #D91C15;

$c-donate-icon-heart-hover: #D91C15;

$c-sticky-bar-bg:       #88839C;
$c-sticky-bar-fg:       #E8E7F3;
$c-sticky-bar-a-hover:  #E89A67;
$c-sticky-bar-a-hover:  #D7EA8E;

$c-sticky-bar-a-link:   #D2E292;
$c-sticky-bar-a-hover: #EBB795;

$c-find-a-link:    #CDDF86;
$c-find-a-hover:   #E9AF8A;

$c-next-a-link:         #B5D147;
$c-next-a-visited:      #A1B067;
$c-next-a-hover:        #E89A67;

body {
    background-color: $c-body-bg;
    color: $c-body-fg;
}

body>header {
    background-color: $c-body-bg;
}

h1 {
  background: transparent url(/ui/img/rounded-purpy-square.png) 0 1rem no-repeat;
  background-size: 3.2rem 3.2rem;
  padding: 0.5rem 0.5rem 0.5rem 5rem;
}

a {
    font-weight: normal;

    &:link {
        color: $c-a-link;
    }
    &:visited {
        color: $c-a-visited;
    }
    &:hover {
        color: $c-a-hover;
        text-decoration: underline;
    }
}

code { background-color: $c-code-bg;
	margin:0 .2rem 0 35px; ;
}

p>code {padding:.2rem .5rem;
	margin:0 .2rem 0 0;
}

li>code {padding:.2rem .5rem;
	margin:0 .2rem 0 0;
}

a>code {padding:.2rem .5rem;
	margin:0 .2rem 0 0;
}

ul ul,ul ol,ol ol,ol ul{
	margin:1.5rem 0 1.5rem 3.5rem;
}

ol,ul{
	padding-left:5px
}

#about {
    background-color: $c-about-bg;
    color: #ffffff;
}

#banner {
    background-color: #6F6A83;
}

/* fixed header */
#sticky-bar {
    background-color: $c-sticky-bar-bg;
    color: $color1;

    a {
        color: $c-sticky-bar-a-link;
        &:hover {
            color: $c-sticky-bar-a-hover;
        }
    }

}

/* footer */
#find {
    background-color: $color0;
    color: $color1;

    a {
        &:link, &:visited {
            color: $c-find-a-link;
        }
        &:hover {
            color: $c-find-a-hover;
        }
    }

}

/* donate button */
.button.button-primary,
#sticky-bar .button.button-primary,
#find .button.button-primary {
    background-color: $c-donate-bg;
    border-color: $c-donate-bg;
    color: $c-donate-fg;
    padding: 0 2rem;

    &:focus,
    &:hover {
        background-color: $c-donate-bg-hover;
        border-color: $c-donate-bg-hover;
        color: $c-donate-fg-hover;
        text-decoration: none;
        font-weight: 600;

        .icon-heart {
            color: $c-donate-icon-heart-hover;
        }
    }
}

/* download button */
.button.button-dl,#sticky-bar .button.button-dl,#find .button.button-dl{
	background-color:#C5D27D;
	border-color:#C5D27D;
	color:#662984;
	padding:.25rem 2rem 0
}

/* download button hover */
.button.button-dl:focus,.button.button-dl:hover,#sticky-bar .button.button-dl:focus,#sticky-bar .button.button-dl:hover,#find .button.button-dl:focus,#find .button.button-dl:hover{
	background-color:#E5EDB0;
	border-color:#E5EDB0;
	color:#662984;
	text-decoration:none;
	font-weight:600
}

/* download button icon */
.button.button-dl:focus .icon-download,.button.button-dl:hover .icon-download,#sticky-bar .button.button-dl:focus .icon-download,#sticky-bar .button.button-dl:hover .icon-download,#find .button.button-dl:focus .icon-download,#find .button.button-dl:hover .icon-download{
	color:#662984
}

pekman · 2017-05-27 05:58:57

I work it, go rebuild palette, thanks for clarification.

pekman · 2017-05-27 07:32:58

update

golinux · 2017-05-27 15:19:34

FANTASTIC!! Thanks so much for putting that together!

The officially official Devuan Forum!

#1 2017-05-27 01:23:41

Devuan color Palette

#2 2017-05-27 04:09:00

Re: Devuan color Palette

#3 2017-05-27 05:58:57

Re: Devuan color Palette

#4 2017-05-27 07:32:58

Re: Devuan color Palette

#5 2017-05-27 15:19:34

Re: Devuan color Palette

Board footer