<div class="wrapper"> <div class="color-picker" name="color"> <div class="color-indicator" name="color"></div> </div> <div class="preview"></div> <div class="hue palette" name="hue"> <div class="slider" name="hue"></div> </div> <div class="alpha palette" name="alpha"> <div class="slider" name="alpha"></div> </div> <h5 class="hex result">#fff</h5> <h5 class="rgb result">rgba(255, 255, 255, 1)</h5> <h5 class="hsl result">hsla(0, 0%, 100%, 1)</h5> </div> <div class="target">Change my color pls!</div>
@import url(https://fonts.googleapis.com/css?family=Quicksand); html, body { margin: 0; box-sizing: border-box; height: 100vh; } body { background-color: #333; font-family: 'Quicksand', sans-serif; padding-top: 20px; } .wrapper { background: white; margin: 0 auto; width: 200px; height: 265px; border-radius: 3px; border: 1px solid #666; } .color-picker { width: 200px; height: 120px; margin-bottom: 15px; border-radius: inherit; background: darkred; overflow: hidden; } .preview { background: darkgreen; float: left; width: 32px; height: 32px; border-radius: 50%; margin-left: 12px; border: 1px solid #eee; } .palette { background: darkblue; width: 120px; height: 12px; margin-left: 60px; position: relative; border-radius: 1px; margin-bottom: 10px; } .result { color: #aaa; margin: 0; line-height: 2; text-align: center; user-select: auto; } .target { width: max-content; margin: 0 auto; padding-top: 10px; color: white; font-size: 24px; cursor: pointer; }