Board backgrounds library

Solarized Inspired Color Schemes

Some further experimentation with color schemes selecting from the Solarized palette

Using “yellow” for the background

With the “yellow” desaturated

Dark mode with shades of grey

8 Likes

That last one is sleek!

It reminds me of the DeepMind art.

3 Likes

My take on it:

7 Likes

Nice! How did you get the player card colours to match?

2 Likes

It’s a work in progress, but with this custom CSS using Stylish:

/*
Configure in OGS settings:
board: 131 148 150 (base 0)
lines:   0  43  54 (base03)
black stones:   0  43  54 (base03)
white stones: 238 232 213 (base2)
*/

/* base02 */
.players .black.player-container {
    background: #073642 !important;
}

/* base2 */
.players .white.player-container {
    background: #eee8d5 !important;
}

/* default text: base0 */
#main-content div {
    color: #839496 !important;
}

/* default links: blue */
a {
    color: #268bd2 !important;
}

/* navbar links and similar: base1 */
#NavBar a, .Dock a, #NavBar .right .icon-container .fa {
    color: #93a1a1 !important;
}

/* default bg: base03 */
#main-content {
    background-color: #002b36 !important;
}

/* green highlight for your move: base02 */
.GameList .current-users-move {
    background-color: #073642 !important;
}

/* player color: blue */
body .Player {
    color: #268bd2 !important;
}

/* chat log bg: base02 */
.chat-log {
    background-color: #073642 !important;
}

/* button: base02 on base0 */
button {
    color: #002b36 !important;
    background-color: #839496 !important;
    border-color: #073642 !important;
}

/* leave zen mode: base01 */
.leave-zen-mode-button {
    color: #586e75 !important;
}

/* chat presence: base1 / blue */
.ChatPresenceIndicator {
    color: #93a1a1 !important;
    text-shadow: none !important;
}
.ChatPresenceIndicator.online {
    color: #268bd2 !important;
}

/* unread chat: blue */
.ChatIndicator.unread .fa-comment {
    color: #268bd2 !important;
}

/* friend indicator: green */
.FriendIndicator.online .fa-users {
    color: #859900 !important;
}

/* turn indicator: base02 on base0  */
#NavBar .turn-indicator .count {
    color: #002b36 !important;
    background-color: #839496 !important;
}

/* shade OGS logo */
.ogs-nav-logo {
    background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 425.625 144.375' width='454' height='154'%3E%3Cg fill='%2393a1a1'%3E%3Cpath d='M236.509 1.153c28.915 0 47.145 13.8 57.831 30.073l-24.725 13.183c-6.496-9.681-18.439-17.302-33.106-17.302-25.354 0-43.793 19.156-43.793 45.109 0 25.953 18.439 45.109 43.793 45.109 12.781 0 24.097-5.149 30.173-10.505V90.135h-37.297V65.007h66.632v52.524c-14.249 15.654-34.154 25.953-59.508 25.953-40.859 0-74.385-28.013-74.385-71.269 0-43.461 33.526-71.062 74.385-71.062zM326.392 99.199c9.849 10.093 25.145 18.538 44.421 18.538 16.344 0 24.307-7.621 24.307-15.448 0-10.299-12.153-13.801-28.287-17.509-22.84-5.149-52.174-11.329-52.174-42.02 0-22.863 20.115-41.401 53.012-41.401 22.211 0 40.649 6.591 54.479 19.156l-16.554 21.422C394.281 31.638 379.195 26.9 365.575 26.9c-13.41 0-20.534 5.768-20.534 14.007 0 9.269 11.734 12.153 27.868 15.86 23.049 5.149 52.384 11.947 52.384 42.432 0 25.129-18.229 44.079-55.946 44.079-26.82 0-46.097-8.857-59.088-21.834z'/%3E%3C/g%3E%3Cpath d='M144.33 72.21c0 39.855-32.31 72.165-72.165 72.165C32.31 144.375 0 112.065 0 72.21h144.33z' fill='%23073642'/%3E%3Cpath d='M72.165.045c39.855 0 72.165 32.31 72.165 72.165H0C0 32.355 32.31.045 72.165.045z' fill='%2393a1a1'/%3E%3Cpath d='M9.827 64.743s-.073-.322-.144-.925c-.061-.601-.179-1.497-.206-2.624-.076-2.257.037-5.492.733-9.296.334-1.906.836-3.942 1.473-6.075.675-2.116 1.457-4.344 2.491-6.559a51.579 51.579 0 013.589-6.657c1.385-2.187 2.932-4.337 4.674-6.337.839-1.024 1.791-1.96 2.703-2.916.936-.936 1.93-1.811 2.903-2.683 2.018-1.676 4.112-3.195 6.251-4.477 2.132-1.294 4.307-2.341 6.404-3.204 1.072-.39 2.095-.789 3.103-1.123 1.033-.28 2.016-.563 2.967-.799a42.764 42.764 0 015.262-.868c1.591-.099 2.944-.215 4.086-.155 1.135.035 2.029.137 2.628.176.602.053.923.102.923.102s-.273.193-.785.516c-.515.309-1.255.807-2.199 1.345-.944.543-2.042 1.304-3.307 2.052-.636.367-1.278.832-1.961 1.281-.673.473-1.42.86-2.125 1.413-.719.52-1.475 1.027-2.243 1.563l-2.31 1.737a103.765 103.765 0 00-4.738 3.89c-.8.683-1.565 1.439-2.373 2.148-.787.738-1.537 1.537-2.337 2.283l-2.29 2.4c-.722.85-1.524 1.625-2.222 2.505a69.037 69.037 0 00-2.155 2.579 87.914 87.914 0 00-2.082 2.63l-1.987 2.666c-.616.912-1.274 1.784-1.878 2.679-1.234 1.771-2.376 3.54-3.476 5.231-1.075 1.704-2.114 3.332-3.037 4.873-1.88 3.066-3.431 5.724-4.55 7.614a3466.645 3466.645 0 00-1.785 3.015z' fill='%23eee8d5'/%3E%3Cg%3E%3Cpath d='M84.164 131.848l2.84-2.055c1.779-1.289 4.282-3.079 7.162-5.233 1.449-1.06 2.975-2.245 4.572-3.473 1.583-1.252 3.239-2.551 4.889-3.943.835-.684 1.643-1.419 2.494-2.117l2.472-2.224a89.632 89.632 0 002.427-2.316 69.185 69.185 0 002.37-2.384c.812-.776 1.51-1.647 2.29-2.444l2.179-2.501c.669-.866 1.396-1.687 2.058-2.538.632-.87 1.314-1.701 1.921-2.561 1.234-1.71 2.38-3.413 3.437-5.077l1.516-2.46c.463-.814.898-1.613 1.35-2.377.486-.753.802-1.532 1.211-2.246.384-.722.787-1.404 1.094-2.071.629-1.329 1.285-2.492 1.739-3.482.449-.99.876-1.772 1.136-2.314.274-.54.441-.829.441-.829s.079.316.187.91c.095.593.279 1.473.418 2.601.165 1.131.175 2.49.223 4.083a42.778 42.778 0 01-.379 5.32c-.148.969-.339 1.974-.522 3.029-.24 1.034-.543 2.09-.832 3.193-.667 2.168-1.508 4.43-2.601 6.672-1.08 2.248-2.399 4.474-3.882 6.638-.779 1.05-1.559 2.12-2.404 3.138-.868.995-1.712 2.03-2.654 2.96-1.832 1.919-3.829 3.658-5.88 5.238a51.679 51.679 0 01-6.298 4.187c-2.11 1.234-4.257 2.218-6.301 3.085-2.066.831-4.047 1.518-5.914 2.026-3.724 1.043-6.935 1.454-9.189 1.587-1.126.077-2.028.042-2.632.037a10.034 10.034 0 01-.938-.059z' fill='%23002b36'/%3E%3C/g%3E%3C/svg%3E") !important;
}

Update: maybe I’m getting carried away here, but:

9 Likes

Not possible! Keep it coming dude :grin:

3 Likes

image

Combining the Solarized green and white (darker shade) on the soft grey board makes all my thumbnails look like RPG pixel art of lichen-covered dungeons.

… It’s great.

6 Likes

Pics!!!

1 Like

One of my recent games.

When I want to focus on the individual groups rather than appreciate the whole-board effect, the colour contrast starts to look insufficient. I might play around with it a bit more.

It’s more in its element in the endgame:

4 Likes

I actually wanted to see a profile page looking like a dungeon :grin:

3 Likes

After using that scheme for a while, I’ve found that the white is a little too bright for my taste.

Solarized calls for a luminosity of 212, but I’m currently trying it on 185, which looks like this:

I call it the “pistacchio theme” ^^

Actually, I’m leaning towards an even darker version, with a luminosity of 180.

I’m also considering going as dark as 175. At the moment I’m feeling the colours out. I think my ideal luminosity is going to be in this 175–185 range.

6 Likes

Great name! But I can’t see any difference between the colours on those images :face_with_monocle:

I actually didn’t know we could add custom board backgrounds as an artist this inspires me.

2 Likes

Board: #001334
Lines: #467793
Black: #0D4D6F
White: #FAFFFF

Colors from Match 1 - Google DeepMind Challenge Match: Lee Sedol vs AlphaGo - YouTube

Black: 51518A (courtesy of @bugcat)

6 Likes

Those stones are a bit too blue for me.

How do they look with the DeepMind indigo?

image

Indigo, 51518A
R81 G81 B138

1 Like

This is my favourite one. Once applied, cannot go back to regular board.

How did you apply the tree image to wood texture? What’s the source for the wood texture? I’m interested to try just the wood texture on its own.

3 Likes

With 92 posts, the page is already very slow to load :frowning:
Am thinking to start a parallel thread, for links only… and a textual description of what will be there.

Anyhow, I would like to contribute two blue backgrounds:
https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcRcDhVkIS4P_b16xuQgry2VGLUZChBx2cKXEkRpYfMepNyMG7uKvO3yXX3gCCVozwtWrPY&usqp=CAU#
sky1

and

https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcRFQk_S8ASSthZHTMpviYFQKS5AzXTjrrHf2MyQ4Bs4xDEYDUdW6tQefYrSrQLWl0NNZIQ&usqp=CAU

sky2
(hope those links work)

Edit: and a green background
https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcQO3huZx9ZGsNWYVU942jAvOeJZhWSHuJhENDXjlzogfWI2g8Xfw5MQMTW0hKD4cZPSNRY&usqp=CAU
green

4 Likes

I was using the GIMP, but I imagine other graphics applications are similar.
I made the image a separate layer and then adjusted the transparency (opacity 70%).
But first I increased the contrast by going to Colo[u]rs | Levels and using the dropper to pick the lightest and darkest parts of the image.

The Oak was from a site selling flooring. The original image was smaller so I rotated, reflected and tiled to make it bigger. Here it is:


https://ogs-forums.s3.dualstack.us-east-1.amazonaws.com/original/3X/1/2/12ab7e015edf0b4c616a1b84d578aa7d7ad3597c.jpeg
I think that’s the one. If not, I used the bamboo one that I uploaded earlier in this thread.
If you need the image to be smaller (it’s 2036), I would recommend cropping, rather than resizing, to maintain the detail. You may wish to play with saturation and colour levels (or not).

7 Likes

I tried a lot of the backgrounds presented here, but this one is just perfect for my needs. Looks like real wood but is not distracting in any way.

1 Like

https://ogs-forums.s3.dualstack.us-east-1.amazonaws.com/original/3X/0/3/03fec2fdeca3798fa83306826b697c77f97a4120.jpeg