How to color area between concentric circle using CSS

See more:

HTML

CSS3

i have concentric circle (circle within circle) & i have to color area between two circle with two diffrent colors. Half of it should have a diffrent color.

What I have tried:

.outer-circle-smallest {

background-color: #75a3a3;
width:70px; /* You can define it by % also */
height:70px; /* You can define it by % also*/
position:relative;
text-align:center;
border-radius: 50%;
background-clip:content-box;
padding:5px;
box-shadow: inset 10px 24px 40px 0px #75a3a3,
inset -10px -24px 40px 0px #75a3a3,
inset 20px -10px 40px 0px #75a3a3,
inset -20px 10px 40px 0px #75a3a3;
}
.inner-1 {
background-color:#f2f2f2;
top: 10%; left:10%; /* of the container */
width:80%; /* of the outer-1 */
height:80%; /* of the outer-1 */
position: absolute;
border-radius: 50%;
text-align:center;
border:1px solid #f2f2f2
}