SOURCE

var _$paletteElement = $('.palette_color');

function _colorizePaletteItems(){
	$.each(_$paletteElement, function(i){
		   $(this).css('background-color', $(this).data('color'));
	})
}

function _togglePalette(){
	$('.palette_color__main').on('click', function(){
		$('.palette').toggleClass('palette__opened');
	})
}

function _initSetColor(){
	$('.palette_color').on('click', function(){
		var color = $(this).data('color');
		_setColor(color);
	})
}

function _setColor(color){
	$('.palette_color__main').css('background', color);
	$('.wrapper').css('background', color);
}

_colorizePaletteItems();
_togglePalette();
_initSetColor();

<div class="wrapper">
	<div class="palette">
		<div class="palette_item_wrapper">
			<div data-color="#e169c3" class="palette_color"></div>
			<div data-color="#b569e1" class="palette_color"></div>
			<div data-color="#7169e1" class="palette_color"></div>
			<div data-color="#69b8e1" class="palette_color"></div>
			<div data-color="#69e1d4" class="palette_color"></div>
			<div data-color="#6ce169" class="palette_color"></div>
			<div data-color="#bee169" class="palette_color"></div>
			<div data-color="#e1a169" class="palette_color"></div>
			<div data-color="#83091d" class="palette_color"></div>
			<div data-color="#83091d" class="palette_color"></div>
		</div>
		<div class="palette_color__main"></div>
	</div>
</div>

.wrapper{
	width: 100vw;
	height: 100vh;
	transition: background .3s;
}

.palette{
	width: 300px;
	height: 300px;
	position: absolute;
	left: 0;right: 0;top: 0;bottom: 0;
	margin: auto;
	
	.palette_item_wrapper{
		transition: transform .4s;
		width: 100%;
		height: 100%;
		border-radius: 50%;
		transform: translateX(100px);
		transition-delay: .4s;
	}
	
	&.palette__opened{
		
		.palette_item_wrapper{
			transform: translateX(0);
			transition-delay: 0s;
		}
		.palette_color{
			transition-delay: .2s;
			@for $i from 1 through 10{
				&:nth-child(#{$i}){
					transform: rotate(($i - 1)*36deg);
				}
			}
		}
	}
	
	.palette_color, .palette_color__main{
		position: absolute;
		border-radius: 50%;
		cursor: pointer;
		border-style: solid;
		border-color: #ffffff;
		box-shadow: 3px 3px 10px rgba(0,0,0,.6);
	}
	
	.palette_color__main{
		background-color: #e16969;
		width: 100px;
		height: 100px;
		transition: background .3s;
		border-width: 6px;
		left: 0;right: 0;top: 0;bottom: 0;
		margin: auto;
	}
	
	.palette_color{
		width: 50px;
		height: 50px;
		display: block;
		transform-origin: 250% 50%;
		transition: transform .5s;
		border-width: 3px;
		transition-delay: 0s;
		
		left: 12px;top: 0;bottom: 0;
		margin: auto;
	}
	
}