Last active
October 16, 2022 18:37
-
-
Save stevenctl/068ea06f4a90e639b80f68332c7819d9 to your computer and use it in GitHub Desktop.
autumn palette
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <html> | |
| <div style="height: 100%; align-items: stretch; display: flex; flex-direction: column-reverse;"> | |
| <div onclick="copyColor(this)" class="hoverable my_black" style="flex: 1; "></div> | |
| <div onclick="copyColor(this)" class="hoverable my_gray0" style="flex: 1; "></div> | |
| <div onclick="copyColor(this)" class="hoverable my_gray1" style="flex: 1; "></div> | |
| <div onclick="copyColor(this)" class="hoverable my_gray2" style="flex: 1; "></div> | |
| <div onclick="copyColor(this)" class="hoverable my_gray3" style="flex: 1; "></div> | |
| <div onclick="copyColor(this)" class="hoverable my_gray4" style="flex: 1; "></div> | |
| <div onclick="copyColor(this)" class="hoverable my_gray5" style="flex: 1; "></div> | |
| <div onclick="copyColor(this)" class="hoverable my_gray6" style="flex: 1; "></div> | |
| <div onclick="copyColor(this)" class="hoverable my_white" style="flex: 1; "></div> | |
| <div onclick="copyColor(this)" class="hoverable my_turquoise" style="flex: 1; "></div> | |
| <div onclick="copyColor(this)" class="hoverable my_turquoise2" style="flex: 1; "></div> | |
| <div onclick="copyColor(this)" class="hoverable my_green" style="flex: 1; "></div> | |
| <div onclick="copyColor(this)" class="hoverable my_brown" style="flex: 1; "></div> | |
| <div onclick="copyColor(this)" class="hoverable my_yellow1" style="flex: 1; "></div> | |
| <div onclick="copyColor(this)" class="hoverable my_yellow2" style="flex: 1; "></div> | |
| <div onclick="copyColor(this)" class="hoverable my_red" style="flex: 1; "></div> | |
| </div> | |
| <div id="snackbar">Copied <span id="copied-col">PLACEHOLDER</span> to clipboard...</div> | |
| <script> | |
| const rgb2hex = (rgb) => `#${rgb.match(/^rgb\((\d+),\s*(\d+),\s*(\d+)\)$/).slice(1).map(n => parseInt(n, 10).toString(16).padStart(2, '0')).join('')}` | |
| addEventListener('load', writeColors) | |
| function showSnackbar(color) { | |
| // Get the snackbar DIV | |
| const sb = document.getElementById("snackbar"); | |
| const colText = document.getElementById("copied-col"); | |
| // Add the "show" class to DIV | |
| colText.innerText = color; | |
| sb.className = "show"; | |
| // After 3 seconds, remove the show class from DIV | |
| setTimeout(function () { | |
| sb.className = sb.className.replace("show", ""); | |
| }, 3000); | |
| } | |
| function writeColors() { | |
| const els = document.getElementsByClassName("hoverable"); | |
| for (let el of els) { | |
| el.innerHTML = `${rgb2hex(getComputedStyle(el).backgroundColor)}`; | |
| } | |
| } | |
| function copyColor(e) { | |
| const col = rgb2hex(getComputedStyle(e).backgroundColor); | |
| navigator.clipboard.writeText(col); | |
| showSnackbar(col); | |
| } | |
| </script> | |
| <style> | |
| #snackbar { | |
| visibility: hidden; /* Hidden by default. Visible on click */ | |
| min-width: 250px; /* Set a default minimum width */ | |
| margin-left: -125px; /* Divide value of min-width by 2 */ | |
| background-color: #333; /* Black background color */ | |
| color: #fff; /* White text color */ | |
| text-align: center; /* Centered text */ | |
| border-radius: 2px; /* Rounded borders */ | |
| padding: 16px; /* Padding */ | |
| position: fixed; /* Sit on top of the screen */ | |
| z-index: 1; /* Add a z-index if needed */ | |
| left: 50%; /* Center the snackbar */ | |
| bottom: 30px; /* 30px from the bottom */ | |
| } | |
| /* Show the snackbar when clicking on a button (class added with JavaScript) */ | |
| #snackbar.show { | |
| visibility: visible; /* Show the snackbar */ | |
| /* Add animation: Take 0.5 seconds to fade in and out the snackbar. | |
| However, delay the fade out process for 2.5 seconds */ | |
| -webkit-animation: fadein 0.5s, fadeout 0.5s 2.5s; | |
| animation: fadein 0.5s, fadeout 0.5s 2.5s; | |
| } | |
| /* Animations to fade the snackbar in and out */ | |
| @-webkit-keyframes fadein { | |
| from { | |
| bottom: 0; | |
| opacity: 0; | |
| } | |
| to { | |
| bottom: 30px; | |
| opacity: 1; | |
| } | |
| } | |
| @keyframes fadein { | |
| from { | |
| bottom: 0; | |
| opacity: 0; | |
| } | |
| to { | |
| bottom: 30px; | |
| opacity: 1; | |
| } | |
| } | |
| @-webkit-keyframes fadeout { | |
| from { | |
| bottom: 30px; | |
| opacity: 1; | |
| } | |
| to { | |
| bottom: 0; | |
| opacity: 0; | |
| } | |
| } | |
| @keyframes fadeout { | |
| from { | |
| bottom: 30px; | |
| opacity: 1; | |
| } | |
| to { | |
| bottom: 0; | |
| opacity: 0; | |
| } | |
| } | |
| body { | |
| font-family: sans-serif; | |
| font-weight: bolder; | |
| } | |
| .hoverable { | |
| flex: 1; | |
| text-align: center; | |
| text-justify: distribute-center-last; | |
| align-items: center; | |
| justify-content: center; | |
| color: black; | |
| } | |
| .hoverable:hover { | |
| opacity: .7; | |
| } | |
| /* # Cursorline */ | |
| .my_black { | |
| background-color: #212121 | |
| } | |
| /* # Default Background */ | |
| .my_gray0 { | |
| background-color: #262626 | |
| } | |
| /* # Ruler */ | |
| .my_gray1 { | |
| background-color: #2b2b2b | |
| } | |
| /* # Lighter Background (Used for status bars, line number and folding marks) */ | |
| .my_gray2 { | |
| background-color: #323232 | |
| } | |
| /* # Selection Background */ | |
| .my_gray3 { | |
| background-color: #505050 | |
| } | |
| /* # Comments, Invisibles, Line Highlighting */ | |
| .my_gray4 { | |
| background-color: #7c7c7c | |
| } | |
| /* # Dark Foreground (Used for status bars) */ | |
| .my_gray5 { | |
| background-color: #a8a8a8 | |
| } | |
| /* # Light Foreground (Not often used) */ | |
| .my_gray6 { | |
| background-color: #c0c0c0 | |
| } | |
| /* # Default Foreground, Caret, Delimiters, Operators */ | |
| /* # Classes, Markup Bold, Search Text Background */ | |
| /* # Variables, XML Tags, Markup Link Text, Markup Lists, Diff Deleted */ | |
| .my_white { | |
| background-color: #F3F2CC | |
| } | |
| /* # Support, Regular Expressions, Escape Characters */ | |
| .my_turquoise { | |
| background-color: #86c1b9 | |
| } | |
| /* # URL */ | |
| .my_turquoise2 { | |
| background-color: #72a59e | |
| } | |
| /* # Strings, Inherited Class, Markup Code, Diff Inserted */ | |
| .my_green { | |
| background-color: #99be70 | |
| } | |
| /* # Member variables, Quotes */ | |
| .my_brown { | |
| background-color: #cfba8b | |
| } | |
| /* # Functions, Methods, Attribute IDs, Headings */ | |
| .my_yellow1 { | |
| background-color: #FAD566 | |
| } | |
| /* # Debug, Info */ | |
| .my_yellow2 { | |
| background-color: #ffff9f | |
| } | |
| /* # Keywords, Storage, Selector, Diff Changed */ | |
| .my_red { | |
| background-color: #F05E48 | |
| } | |
| </style> | |
| </html> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
https://codepen.io/stevenctl/pen/qBYwdbQ